Passing Data to Components Via Routes

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