Unless section we were able to render out a list of video item components we're now going to make sure
we can customize each of those components by taking the video that we are mapping over and passing it
as a prop down into the video item.
So in the video item right here I'm going to add in a prop called video and I'll pass it the video that
we are currently iterating over.
So now if I go back over to the video Item j file is prop's object is now going to contain a video property
and that contains all the information about this particular video that we want to show as a list.
And so in total we really want to put the title of the video and maybe the kind of thumbnail image for
the video to the left hand side of it as well.
That's not just an icon right there that's supposed to represent an image.
Now let's first focus on figuring out how we can determine what different properties we need to refer
to inside of that video object.
Remember this video object right here is the object that we just got back from the YouTube API.
So in order to figure out what different properties are inside there we can open up our network console
over here.
And do a search.
So all say like buildings.
So now I see the search request right here.
I can click on it and again go to the preview tab.
So remember we are iterating over the list of items.
So inside of each of those objects we have this snippet property and inside of the snippet property
is a title.
So essentially we want to reference video snippet dot title in order to print out the title of any video
on the screen.
So I'm gonna flip back over to my video item.
So this project props object right here now contains that video inside of it.
I'm going to structure just the video out by putting down a set of parentheses and then a set of curly
braces and reference video like so.
So then inside the Stiv I place my curly braces and I could reference video dot snippet dot title.
Now if I save this we can refresh our application do another search for say buildings and I'll see all
of my different titles appear on the screen.
All right.
So not bad.
So we now know that the video item component five of them are appearing on the screen right now.
We have five separate instances of this component and they each are receiving a separate video object.
So we can now kind of pull off all the different properties from the video object right here to make
sure that we show all the appropriate content on this list.
We want the title.
Now we also want an image right next to it.
So let's now try getting an image to display as well.
I'm going to give myself a little bit space here
and don't forget to remove that semi-colon inside the div if you Manue place.
So parentheses.
And then let's say How about right before printing out the title.
I'm going to put an image tag.
And inside if I want to reference the thumbnail for each individual image and pass it to the sarcy property.
So in order to do so I will again look at my request right here that is made when I do a search.
So again I'll look at one of these objects so items at 0 that snippet.
And then there's the thumbnails object inside there.
Now you'll notice inside the thumbnails object we can select from a default quality thumbnail a high
quality thumbnail or a medium quality.
We're going to go with the medium quality thumbnail so if we reference in total video snippet thumbnails
medium.
You are l.
That will give us the u r l to a very single thumbnail.
For a video.
So in total we can go back over here find the sarcy property into a reference video snippet that was
thumbnails dot medium right medium.
You are l like so.
So now if I save this I can flip back over.
We can do a search a second time again all do buildings and I start to see my thumbnails appear on the
screen awesome.
All right this is good progress but as you can tell we've got some gigantic images here and we really
want them to be better style than they're currently showing up.
So let's take another pause when we come back in the next section.
We're going to use semantic UI to add a little bit of styling to each of these and make sure that they
show up a little bit better than they are currently.
So another quick puzzle I'll see you in just a minute.