- Read Tutorial
- Watch Guide Video
So if you remember what we did was mapped over the data and returned Library courses every time we had an instance of course. So this video we're just going to take that data and put it into here so that it looks like it should. So go into LibraryCourse and set it to course.
Now we have access to the course, which is each one of these. So it has access to the title and description.
So go into libraryCourse.js and instead of all this dummy text let's just say:
libraryCourse.js
{ this.props.course.description }
Same for the title:
libraryCourse.js
{ this.props.course.title }
That should be all that we have to do.
There is a better way that we can write this. All we have to say is:
libraryCourse.js
{ this.props.title }
and
libraryCourse.js
{ this.props.description }
The way that we do this is by going into library.js where we set course={course} and instead we say {...course}. That should work. This is a great example of how a spread operator works.
So what is happening here is that we are taking the course and splitting it. We are saying that by doing the spread operator we are essentially saying that title={course.title} and description={course.description}. By using the spread operator we don't have to write out each attribute. This is especially useful when we use items that we fetch from a database. Typically, when you fetch items from a database they will have an ID. That is good because you can use the ID instead of the index. So that's how you get the custom data in there.
That should be all that we have to do for this video. In the next video, let's get it functional so that when we hit add here we can tell our application that this course is a part of our schedule, and then we will go from there. So let's commit our code. git status, git add, git commit -m "mapped course object datalibrary course component instances", and git push. See you in the next video.