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