In the last section we put our video detail together but we didn't quite get it all the way over to 2
indexed Arjay us. 3
So we are ex-party at the bottom. 4
So let's flip it over to index start. 5
Yes. 6
And at the top we'll go ahead and import it. 7
So I'll say import video detail from current directory components 8
video detail go. 9
And then we could go ahead and add it to our render function video detail and make sure that it goes 10
in between the search bar and the video list here. 11
Just one little issue though we need a video to pass to it right now. 12
We've just got an array of videos without any ability as to slight like a particular one out of the 13
list. 14
So just to make sure that our component is working correctly. 15
Let's take the first video and pass it in the first video is going to be this state DOT videos at zero 16
. 17
Simple enough. 18
OK. 19
So let's go ahead and save this and then we'll flip back on over your frush. 20
And we got nothing. 21
Let's pop open the console and we see an area here that says cannot read Property ID of undefined. 22
And the second one is you know kind of a nasty looking air. 23
It's probably results in this first one. 24
I suspect if we fix this area up here we'll probably fix the second one as well. 25
So what's happening here. 26
Well let's think about it for a little bit. 27
When the app first renders we've gone through this couple of times now when the our first renders and 28
runs the constructor function which sets the list of videos to an empty array and then it kicks off 29
the request to go get some more videos in between the time that it takes. 30
This request right here to finish the components still attempts to render itself. 31
You know it doesn't it doesn't pause it doesn't say Oh I'm you know I'm still getting data. 32
I don't want to render myself yet. 33
It just goes ahead and does it just tries to render itself. 34
So at that point in time this starts state on videos is still an empty array. 35
When we access index at zero at it or it we get undefined. 36
So we're passing in video equals undefined into video detail. 37
So how is that going to manifest itself inside of video detail. 38
Well when we come in here video is going to be undefined. 39
And so when we try to call video ID you best believe are going to be getting cannot read Property ID 40
of undefined. 41
That's exactly what's happening. 42
We're trying to read video not I.D. but video is undefined You know there's nothing there. 43
So what are you going to do. 44
What are we going to do is something like this. 45
Well you'll find that you start to run issues all the time like this with react or react always wants 46
to like render instantly want to do it right away it is want to wait. 47
Some parent objects just can't fetch information fast enough to satisfy the needs of a child object 48
. 49
So to handle this case we'll go ahead and add a check inside of our video detail component to make sure 50
that a video has been provided in the props before it attempts to render. 51
So at the top up here we'll add a check. 52
We'll say if no video. 53
So if the video was not provided return a div that just says Loading. 54
So if we try to render video detail in a video is not provided. 55
We'll get back just a day of this as loading and it's a return statement so the rest of everything else 56
in here isn't going to be ran. 57
If a video is provided on the other hand then it can go ahead and build up our nice markup structure 58
here and we'll see a nice video player on the page. 59
So let's go ahead and save this and give it a shot. 60
I'm going to flip back over. 61
Let's refresh. 62
And we got that loading very briefly on there and it looks like we've got an embed on here and we've 63
got a title and a description. 64
Nice. 65
We still have our video list at the bottom. 66
Looks like the Yes this is a little bit off. 67
But we can go ahead and fix that for him a little bit. 68
So looks like I can go ahead and play that for video as well. 69
Nice. 70
This is looking pretty good. 71
So I like where we're at but let's address a little bit bigger problem here. 72
We still can't select any videos. 73
So let's figure out how to click to select a video in the upcoming section.