In the last section we got our list of videos into our video list component.
Now one thing I want to fix up inside of you right away something that you're going to see done in many
locations is rather than referencing props start videos inside of your.
We could instead do structure using as 20:15 syntax just the videos property out of the props object
to do so.
I'm going to remove the props argument.
I will place a set of parentheses and then a set of curly braces inside there and then inside the curly
braces.
All right.
Videos.
So now instead of referencing props repetitively inside this component we could do simply video length.
Now of course we don't want to just print out the number of videos we actually want to render them out
as a list.
So inside this video we're going to start to focus on creating the video item components.
We're going to create the video item we're going to end up having multiple video items when our application
is rendered on the screen.
And every video item component is going to receive a separate video object.
So each video item will be customized to display a slightly different video.
All right let's get to it.
I'm going to flip back over to my editor and study my components directory.
I'm going to make a new file called the video item.
J.S. then inside of your well put together a little bit of GSX to make a functional component as well.
And then inside here all say return about just a div that says video item for now and then let's get
that expert default at the bottom like so I guess now that we've got the video item put together we're
going to flip back over to the video list.
Here's the video list.
At the top we're going to import the video item we just created.
We will then map over this video's array.
And for every video inside there we will render one single video item component.
I apologize for going kind of slow right now but I've found I've built this out and of course before
and I've found that all this terminology or the word video being repeated all over the place very quickly
gets really confusing so I just want to make sure that it's really crystal clear what we're doing right
now.
All right.
So at the top of that video list we are going to import video item from the video item file.
Then inside of this functional component I'm going to take the video Saray this right here is an array
pass from the app component and we're going to map over it.
Remember we pass this inner function that we pass to map a single argument video like so.
So inside of that video is array there are many objects which we are referring to video and that's one
video right there.
This inner function will be called one time for every object inside the videos.
It's now inside of here.
We're going to return a video item component we eventually will take this video argument right here
and pass it as a prop and to video item.
But for right now let's just focus on getting the list to appear on the screen.
So when we map over this array it's going to return a brand new array which is now going to contain
a list of different video item components.
I'm going to assign that list of components to a variable called rendered list like so.
So I now say Konst render lists is going to be the result of mapping over the videos array and now down
inside of our turn statement down here rather than referring to video saut length.
I'm going to instead printout rendered list like so.
All right.
This is a good place to save and test out to make sure that we don't have any obvious errors.
So I going to save the file flip back over to my application and then search for something you are going
to see a warning down here about a key prop but you should also see video item printed on the screen
five times.
If you see any other errors at this point it means that you very likely have a typo either inside the
video list.
So compare your contents with mine.
Or do you have a small typo inside of the video item.
So also compare your contents with mine.
All right.
So now we've got this list of records appearing on the screen.
Let's take another quick break.
When we come back the next section we're going to make sure that we take each of these video objects
and pass them as a prop down into each video item that we create and we'll use that to customize the
contents of the video item component.
So quick pause and I'll see you in just a minute.