In the last section we were able to fetch our own list of videos.
Now it's time to render them out on the right hand side.
We're going to create two separate components.
One is going to be the video list.
The other is going to be the video item the video list is going to take that array of video objects
that we just fetch from the YouTube API.
And then for each video object we're going to render a single video item.
So remember not just this thing right here is going to be a video item.
It's going to be that and that one and that one.
All three are instances of the video item component now in this video we're going to start to create
those two components and then wire the video list up to the app component.
Remember the app component alone is going to show the video list an individualist in turn is going to
render out all the different video item components.
All right.
So let's get to it.
I'm going to flip back over to my code editor and inside of my components directory I want to make a
new file called the video list.
Yes.
We're going to create a functional component inside of here.
So I'll say import re-act from re-act I'll make a new function called video list.
This is going to take some props object which we are not going to use just yet but we will use in just
a minute and then right now I'll have it return a div with the text video list.
And then at the bottom I'll put in my expert default video list.
All right.
So that's a good start.
It's now wired up to the outcome jazz file.
So I'm going to flip back over to Epcot.
Yes.
At the very top I will add an import statement for the video list.
And then I will add this component down inside of my render method and I'm going to make sure that I
clean up that I have blank video so we had just a moment ago.
So right after the search bar I will place video list and whenever the app component shows the video
list we have to give that video list the list of video objects that we have fetched so that the video
list knows what to actually render on the screen.
So we're going to pass a product down into the video list called videos and this is going to be a reference
to the array that we fetch.
Anytime that we call on turn submit.
So the actual array of videos is going to be available at this state DOT videos.
So I'm going to make sure that inside the video list I pass in a proper name videos.
Notice how this is plural.
There's an S on the end and I get it passed in this state.
Videos like so
now we can go back over to the video list.
Now any time that this component is rendered onto the screen it will have a prop called prop's dot videos.
This is going to be the array of different records that we want to render out as female to the screen.
Right now just to make sure that these props are showing up appropriately.
I'm going to remove the text video list and replace it with props videos.
Length just as we had before.
All right.
So I gotta save this all flip back over to my browser.
I see over here a very small little zero.
And if I put in a search term and hit enter I see it go up to five which means that we are correctly
getting our list of videos from the app component down into the video list.
All right let's take a pause here.
When we come back the next section we're going to start to also implement the video item component and
make sure that the video list shows a list of video items.
All right so quick pause and I'll see you in just a minute.