Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React Router v6 Basics!
You have completed React Router v6 Basics!
Preview
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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In this video, we're going to
refactor parts of our code to make
0:00
things more maintainable and efficient.
0:05
The HTML, CSS, and
JavaScript components inside
0:08
the courses directory all share
exactly the same behavior,
0:12
they return a list of courses using
the data in the courses.js arrays.
0:17
Instead of rendering a different component
for each of the three topics, we'll create
0:26
a single container component that
facilitates the rendering of all courses.
0:32
Then we'll pass the course data to
the container component as props.
0:38
So first,
let's rename any one of the three-course
0:44
components to CourseContainer.js.
0:49
I'm choosing the HTML component.
0:53
Visual Studio code is asking if it
should update the import statements,
0:59
and I'll select Yes.
1:05
Then I'll rename the HTML
function to CourseContainer.
1:06
Don't worry about the value
of this courses variable yet,
1:13
we'll change it soon.
1:17
Let's not forget to change
the name in the export statement.
1:19
Now we're ready to render CourseContainer.
1:24
So back in app.js,
fix the import statement to import
1:27
the new CourseContainer component.
1:32
You can delete the imports for
the CSS and JavaScript components
1:36
since we're no longer going to be
using them in our directory app.
1:41
So our CourseContainer component
doesn't need to know where the data
1:46
is coming from, because we'll be passing
the data to the component as props.
1:52
So let's cut the HTML courses import
1:57
out of CourseContainer.js,
2:01
paste it inside App.js, and
adjust the import path.
2:04
Then also import the data from
the CSS courses and JS courses array.
2:10
Next, let's set each element prop
to the CourseContainer component.
2:19
To pass it the course data,
give the component a data prop.
2:30
When the HTML route renders
CourseContainer, the CourseContainer
2:39
component needs to receive the data
from the HTMLCourses array.
2:44
So to pass the data to CourseContainer,
2:50
we'll write HTMLCourses as the value for
data.
2:54
Likewise, to pass the data
in the CSS courses array
2:58
to CourseContainer when
at the /css subpath,
3:04
write CSSCourses, and
we'll do the same for
3:09
the/javascript route.
3:13
Finally in the CourseContainer function,
3:16
instead of iterating over a specific
course list like HTMLCourses,
3:20
we'll iterate over the data being
passed as props with props.data.map.
3:26
Or we can destructure the prop here and
3:33
write data, and
remove props from props.data.
3:38
Now, if you open up the React DevTools
and select the CourseContainer component,
3:44
you'll see the data prop
we just created and
3:50
the six objects being passed
to the data for this path.
3:53
Everything in the directory
should look and
3:58
work the same as before,
except now we're rendering the list of
4:02
courses from a single container
component using props.
4:07
Before moving on to the next lesson,
4:11
you can delete the extra course list
components from your courses directory.
4:14
I'll delete CSS.js and
4:19
JavaScript.js.
4:25
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up