Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Instead of rendering a different component for each course topic, we'll create a container component that facilitates the rendering of all courses. Then we'll pass the course data to the container component as props.
In the previous stage, I mentioned that
we're going to be refactoring parts of our
0:00
code to make things more maintainable and
efficient.
0:03
The HTML, CSS, and JavaScript components
inside the courses directory all share
0:06
exactly the same behavior.
0:11
They return a list of courses using
the data in the courses.js arrays.
0:13
So instead of rendering
a different component for
0:19
each of the three topics,
we'll create a single container component
0:22
that facilitates
the rendering of all courses.
0:26
Then we'll pass the course data to
the container component as props.
0:29
So first,
let's rename any one of the three courses
0:33
components to CourseContainer.js I'm
choosing the HTML component.
0:38
Then I'll rename the HTML
function to CourseContainer.
0:46
And don`t worry about the value for
the courses variable yet.
0:49
We'll change it soon.
0:54
But let's not forget to change
the name in the export statement.
0:56
And now we're ready to
render the course container.
1:01
So back in courses.js, let's import
the new CourseContainer component.
1:04
import CourseContainer from
1:09
'./courses/CourseContainer'.
1:13
And now you can delete the imports for
the HTML, CSS, and JavaScript components,
1:18
since we're no longer going to be
using them in our Directory app.
1:23
So our CourseContainer component doesn't
need to know where the data's coming from,
1:28
because we'll be passing the data
to the component as props.
1:33
So I'm going to cut the HTMLCourses
import out of CourseContainer.js,
1:36
paste it inside Courses.js,
and adjust the import path.
1:43
Then I'll import the data from the
CSSCourses and JavaScriptCourses arrays.
1:51
Next let's replace the component prop in
our courses routes with the render prop.
1:59
And we'll set each render prop to
return the CourseContainer component.
2:10
To pass it the course data,
we'll give the component a data prop.
2:20
When the HTML route renders
CourseContainer, the CourseContainer
2:33
component needs to receive the data
from the HTMLCourses array.
2:38
So to pass the data to CourseContainer,
2:43
we'll write HTMLCourses as the value for
data.
2:46
Likewise, to pass the data
in the CSSCourses array to
2:52
CourseContainer at the CSS subpath,
write CSSCourses for the CSS route.
2:57
And we'll do the same for the JavaScript
route, passing in JSCourses.
3:04
Finally in the CourseContainer function,
3:10
instead of iterating over a specific
course list like HTMLCourses,
3:14
we'll iterate over the data being
passed as props with props.data.map.
3:19
So now if you open up the React dev tools
and select the CourseContainer component,
3:29
you'll see the data prop
we just created and
3:35
the six objects being passed to data for
this path.
3:38
So everything in the directory should look
and work the same as before, except now
3:43
we're rendering the list of courses from
a single container component using props.
3:48
Before moving onto the next lesson,
3:56
you can delete the extra course list
components from your courses directory.
3:57
I'll delete CSS and
JavaScript.js for mine.
4:01
You need to sign up for Treehouse in order to download course files.
Sign up