In the last video we discussed how we're going to get some Click event on the video item to make a change
to the state of our app component.
Remember we're just going to pass a function call back to the video list and then down to the video
item.
So let's get to it.
I'm going to flip back over to my apt G-S file.
Now inside of it the first thing I'm going to do is add on a new property to my state object called
selected video and I will default that to be the value null.
Then after that underneath on terms submit I'm going to add in and you call back I will call on video
select since this is going to be a callback.
I'm going to define it as an arrow function as we have many other times.
This is going to be called with some video object.
Remember this video object right here is the object that we fetch from that YouTube API.
So for now I'm just going to console log that thing out like so and in from the console log let's put
a little string note here that says like from the the app.
Now put a comma and then.
And then the video.
So whenever we see a console log we'll know it's coming from the app component.
So now I'm going to make sure that I pass a reference to this callback right here down to the video
list as a prop so to say on video select equals this start on video.
Select Now remember as I mentioned just a little bit ago with the on search bar called back right there
the name of the prop and the name of the function do not have to be identical.
When we discussed this on form Smit an on terms Smit I had told you that I personally like to use the
same terminology on both sides of the thing but the callback and the prompt that's going down.
So this is a instance of where I'm doing my personal preferred way of handling this.
OK.
So now the video lists are going to open up that file.
Here's the video list.
I'm going to reference the prop's object up here.
Remember we are currently destructuring out the videos property.
I'm going to also do structure out on video select.
So that's a callback that we just passed from the app down to the video list.
And now we'll take that call back and we're going to make sure that we pass it down in turn into the
video item.
So on the video item I'll add in a new prop called on video select and I'll pass it on video select
now and I saved this file.
You'll probably see my code jump.
Just a quick reformatting step.
OK.
Guess not so in this case.
So now finally we can open up our video item.
So here's the video item again.
I'm going to structure out that prop that we just passed down here called on video select.
Now I'm going to add on a callback or meet an event handler to the div right here I'm going to say that
whenever someone clicks this thing so on click I want to call on video select with this very particular
video right here.
Remember we don't want to just invoke on video select We want to call it with the video that was passed
to this very particular video item component.
So I'm going to put a arrow function in here because I want to call on video select with some arguments.
If I just put in on video select like so the function will be called but it will not be called with
the video.
So an easy way to make sure that when we call this thing it passes in the appropriate video it's to
put an air of function in here and then call on video select and then pass in the video like so
OK.
So I'm now going to make sure that I've saved all three files and they'll test this out inside the browser.
And for right now our goal is to make sure that inside the app component we see the console log from
the original on video select callback method.
All right so I'll flip back over.
I'll search for buildings.
I'm going to make sure that I open up my council.
We still have the key working right here.
Don't worry we'll take care of that in just a moment.
And now if I click on the list I'll see from the OP and then that video object.
So inside the video object is the snippet with all the details about this video that we care about.
So the title the thumbnails the id property all that good stuff.
And if I click on some other video I'll see information about that one.
So here now the snippet I see the title of best building demolition compilation.
Yep that's that video right there.
Now we can try the last one really quick.
I click on that one and expand the snippet I can check my title.
And now I see how tall buildings take the wind.
There you go.
All right so very quickly let's do a review of what just happened because this is kind of a confusing
technique if you are seeing it for the very first time.
So inside of our app component we defined a new callback method called on video select.
We then passed that as a prop down to the video list the video list.
In turn pass that down to the video item.
Then whenever a user clicked on a video item we invoked that callback which essentially sent some communication
back up to the app component.
Remember when we are communicating from a parent down to a child we can do that very easily with the
props system but anytime that we want to communicate from a child's back up to some parent component
we usually make use of a callback which is exactly what we did in this video.
So this little connection string right here that was done through a callback function rather than directly
the props system.
All right.
So this looks pretty good.
So now the very lesson we have to do is make sure that on video select right here takes that video and
sets it on our state specifically on the selected video property.
Once we update that property right there on our state object that's going to render the app and then
we can create the video detail component and make sure that we pass the currently selected video to
the video detail.
All right let's take another pause right here and we'll start to take care of that in the next video.