In the previous stage, I mentioned that we're going to be refactoring parts of our

code to make things more maintainable and efficient.

The HTML, CSS, and JavaScript components inside the courses directory all share

exactly the same behavior.

They return a list of courses using the data in the courses.js arrays.

So instead of rendering a different component for

each of the three topics, we'll create a single container component

that facilitates the rendering of all courses.

Then we'll pass the course data to the container component as props.

So first, let's rename any one of the three courses

components to CourseContainer.js I'm choosing the HTML component.

Then I'll rename the HTML function to CourseContainer.

And don`t worry about the value for the courses variable yet.

We'll change it soon.

But let's not forget to change the name in the export statement.

And now we're ready to render the course container.

So back in courses.js, let's import the new CourseContainer component.

import CourseContainer from

'./courses/CourseContainer'.

And now you can delete the imports for the HTML, CSS, and JavaScript components,

since we're no longer going to be using them in our Directory app.

So our CourseContainer component doesn't need to know where the data's coming from,

because we'll be passing the data to the component as props.

So I'm going to cut the HTMLCourses import out of CourseContainer.js,

paste it inside Courses.js, and adjust the import path.

Then I'll import the data from the CSSCourses and JavaScriptCourses arrays.

Next let's replace the component prop in our courses routes with the render prop.

And we'll set each render prop to return the CourseContainer component.

To pass it the course data, we'll give the component a data prop.

When the HTML route renders CourseContainer, the CourseContainer

component needs to receive the data from the HTMLCourses array.

So to pass the data to CourseContainer,

we'll write HTMLCourses as the value for data.

Likewise, to pass the data in the CSSCourses array to

CourseContainer at the CSS subpath, write CSSCourses for the CSS route.

And we'll do the same for the JavaScript route, passing in JSCourses.

Finally in the CourseContainer function,

instead of iterating over a specific course list like HTMLCourses,

we'll iterate over the data being passed as props with props.data.map.

So now if you open up the React dev tools and select the CourseContainer component,

you'll see the data prop we just created and

the six objects being passed to data for this path.

So everything in the directory should look and work the same as before, except now

we're rendering the list of courses from a single container component using props.

Before moving onto the next lesson,

you can delete the extra course list components from your courses directory.

I'll delete CSS and JavaScript.js for mine.