Unless section we added in a little bit of styling to the video item component one of the rules we put
together inside the CSSA file.
I kind of brushed over.
If you open up the CSSA file right now you'll see that we had a rule of cursor pointer right there.
So what's that rule do.
Well if you mouseover and need these items Now you'll notice that your cursor itself turns into a little
kind of clicky icon.
Remember the entire goal of this application is to make sure that you can search for lists of videos
and then that you can click one on the right hand side over here.
When you click on the video we want to show a big detail on that one and show a player in its title
in its description underneath it.
So the reason we put in that pointer was to make sure there was clear to our users that they could click
on this item right here and see that video appear on the screen and it starts to open up a really interesting
topic that we're going to run into inside this application.
How are we going to make sure that clicking on this thing right here is going to open up a detail window
of sorts.
Well let's take a look at a couple different diagrams to help you understand exactly how that's going
to work.
All right.
So here's what we're going to do on our app component.
We currently have our state property with a single.
Or our state object with a single property on it.
The video is property that has an array of video objects that we have retrieved from the YouTube API.
We're going to add on a second property to that state object called selected video whenever a user clicks
on a video.
We're going to take the video object or the thing that we got back from the YouTube API and we are going
to assign it to that selected video property then any time that we have a selected video property we're
going to make sure that we pass that video like this one right here down to the video detail component
and that will tell the video detail what it needs to show on the screen.
So that's what's going to happen from the perspective of the app component.
We're just going to add on this new state property and it's going to reference the current video that
the video details are going to show now where things start to get a little bit more complicated is understanding
how we're going to update that selected video property whenever a user clicks on one of these things
over here.
So we essentially want to say that if I click on this it should update the stay state of my app component.
So like I said that's where things start to get a little bit more challenging.
So to take a look at a diagram to help you understand exactly what's going to go on with this.
All right.
The Seagram is a little bit more complicated.
All right so here it is in total.
Bear with me we'll go through it step by step.
I'm going to zoom in here really quickly.
All right.
That's better.
So at the very top we have our app component the app component has the list of videos and as you very
well know the component is passing that list of videos down to the video list.
So here's the prop's object going from app down to video list.
And there's the videos property.
It has the array of all the different videos in addition to that list of videos we're going to pass
a callback down there as well.
So the app is going to pass a reference to a callback down to the video list.
And that is going to be called the on video select Propp the video list in turn is going to take that
call back on video select and pass it down to each of these different video items each video item currently
is receiving a props object with a single video labeled as the prop called video.
So they will also now be getting a second prop called the on video slide callback that's going to be
the exact same function that was passed from the app to the video list.
So essentially what we're doing here is we are adding a new method to the app component and we are passing
a reference to that method a reference to that function down first to the video list and then down to
the video item then any time that the user clicks on the video item we're going to tell the video item
to call that callback right there.
And when it calls that call back it's going to pass in the video that it had been passed as well.
So you can imagine that this single video right here will be thrown into the on video select callback
so we throw it into that callback.
And so what that does is it invokes a function or invokes a method on the app component with the video
object that was just clicked on.
So then the app component can update its state and say that the new currently selected video is whatever
the user just clicked on.
Now that's what's happening in Diagram format.
If that is really confusing or unclear.
Don't sweat it because as soon as we write up this code we're going to come back to this diagram and
walk through it very quickly a second time.
And I think at that point you'll become a little bit more clear as to what is going on.
All right.
So let's take a pause right here.
When we come back the next section we're going to start to create this new selective video piece of
state and also the on video select callback and pass it down to the video list and then to the video
item.
So quick pause I'll see you in just a minute.