In this section we're going to start to create the video detail component.
Remember the app is going to render the video detail when it renders it.
We're going to pass some props down with maybe some property inside of it called video and it's going
to contain the currently selected video as recorded on the apps state property or the state object right
here.
So let's get to it.
First thing you have to do is find are on video select inside the on video select.
At present we are just canceling out the video that the user just clicked on.
But that's not what we really want to do.
We want to update our states on the app class.
So I'm going to move that console log and replace it with a start set state or update the selected video
to be video like the
now inside my component's directory.
I'm going to create a new file called the video detail dot G-S file.
So as you might guess this file right here is going to contain the video detail component.
This thing in total is supposed to show some video player and then the video title and description right
underneath it.
Right now we'll just focus on making sure that we can show the video title and description and then
we'll come back and figure out how to show the actual player so inside of my video detail file I'm going
to make a functional component by importing re-act from re-act and then I'll make my video detail which
will be called with a prop's object.
And then inside of your I will return a div that just shows the videos title.
Now this is another case where our props object contains a property that we care about.
I'm only going to reference the video property out of this thing so rather than having to write out
like prop stock video all over the place I will structure just video like so and so now instead of Propp
stop video I can instead just do a video.
It's now inside of here.
I'm going to return video snippet title that right there is where the actual title of the video is stored.
And if you don't believe me you can always do a quick search.
Open up your network requests log and then explore that video object again.
Rights.
Then at the bottom of this file will add on an export default video detail.
All right so this is a good start.
The video detail component.
Now it can flip back over to the app.
Here's my app at the top.
I will import my video detail from video detail.
And then I will show this component inside of my render method sit down inside the render method between
the search bar in the video list.
I'm going to put my video detail and I'm going to make sure that I pass it a prop of video and the value
for that is going to come from this state selected video.
Now one thing to double check here is make sure that you're passing this down as a prop called video
not videos.
Remember we determine where we decide what we want our names to be in the video list.
We are passing down an array of objects.
And so it made sense to use the plural form videos.
But in the video detail we are passing down one single object by itself.
So instead of going to pass down the singular form name of the prop so video without an s.
All right so let's save this and then we'll flip back over and see how we're doing.
All right.
So when I look back over I see a nasty error message here that says cannot read properties snippet of
NULL.
Now you might remember me mentioning this error message a little bit ago.
Here's what's happening when our app component first loads up on the screen selected video is set to
the value no.
Right here.
We then take that selective video on the state object and we pass it down into the video detail.
So essentially inside the video detail this video object right here shows up as the value nil.
We then tried to reference video snippet again on the valley knoll or you can't reference a property
on the valley null which is why we see the error message cannot read properly snippet of no.
And of course if you look closely at the error message even tells us the line of code that that is coming
from.
So in order to fix this we can add in a very simple check inside the video detail inside of your all
say if there is no video if video does not exist then I want to return a div that has the text loading
like so.
So if we don't pay if we pass in a value of NULL for the video Propp we're going to instead show the
divx loading and we're not going to even get down here to this line of code where we attempt to reference
the snippet property on it.
All right.
So let's now test this out.
And when I flip back over I see the text that says loading right here.
Now obviously showing the text loading on the screen without ever having it resolve into something without
user interaction is not the best experience.
But we're going to fix this up and improve this experience in just a little bit.
For right now let's just try searching for something.
It's all say buildings now I should be able to click something and see the title appear here instead
of the text loading.
So I click on the video and I see the title appear perfect and I can click on any of these and all the
appropriate titles show up if I search for some other term like let's say I don't know flowers not what
I expected but ok I can now click on these and I see the appropriate titles appear again.
All right so it looks pretty good to take a quick pause right here.
When we come back the next section we're going to start improving the styling of our video detail just
a little bit.