1 00:00:00,870 --> 00:00:04,210 In this section we're going to start to create the video detail component. 2 00:00:04,260 --> 00:00:07,760 Remember the app is going to render the video detail when it renders it. 3 00:00:07,800 --> 00:00:12,150 We're going to pass some props down with maybe some property inside of it called video and it's going 4 00:00:12,150 --> 00:00:18,480 to contain the currently selected video as recorded on the apps state property or the state object right 5 00:00:18,480 --> 00:00:19,460 here. 6 00:00:19,470 --> 00:00:20,820 So let's get to it. 7 00:00:20,820 --> 00:00:25,810 First thing you have to do is find are on video select inside the on video select. 8 00:00:25,830 --> 00:00:29,550 At present we are just canceling out the video that the user just clicked on. 9 00:00:29,610 --> 00:00:31,190 But that's not what we really want to do. 10 00:00:31,200 --> 00:00:35,090 We want to update our states on the app class. 11 00:00:35,310 --> 00:00:42,780 So I'm going to move that console log and replace it with a start set state or update the selected video 12 00:00:43,230 --> 00:00:44,760 to be video like the 13 00:00:47,800 --> 00:00:49,450 now inside my component's directory. 14 00:00:49,450 --> 00:00:54,370 I'm going to create a new file called the video detail dot G-S file. 15 00:00:54,520 --> 00:00:59,380 So as you might guess this file right here is going to contain the video detail component. 16 00:00:59,380 --> 00:01:04,750 This thing in total is supposed to show some video player and then the video title and description right 17 00:01:04,780 --> 00:01:06,040 underneath it. 18 00:01:06,070 --> 00:01:11,020 Right now we'll just focus on making sure that we can show the video title and description and then 19 00:01:11,020 --> 00:01:18,650 we'll come back and figure out how to show the actual player so inside of my video detail file I'm going 20 00:01:18,650 --> 00:01:28,100 to make a functional component by importing re-act from re-act and then I'll make my video detail which 21 00:01:28,100 --> 00:01:30,580 will be called with a prop's object. 22 00:01:32,370 --> 00:01:39,250 And then inside of your I will return a div that just shows the videos title. 23 00:01:39,250 --> 00:01:43,700 Now this is another case where our props object contains a property that we care about. 24 00:01:43,720 --> 00:01:48,070 I'm only going to reference the video property out of this thing so rather than having to write out 25 00:01:48,070 --> 00:01:55,570 like prop stock video all over the place I will structure just video like so and so now instead of Propp 26 00:01:55,570 --> 00:02:01,540 stop video I can instead just do a video. 27 00:02:01,550 --> 00:02:02,730 It's now inside of here. 28 00:02:02,750 --> 00:02:11,300 I'm going to return video snippet title that right there is where the actual title of the video is stored. 29 00:02:11,470 --> 00:02:15,710 And if you don't believe me you can always do a quick search. 30 00:02:15,710 --> 00:02:20,210 Open up your network requests log and then explore that video object again. 31 00:02:21,930 --> 00:02:22,230 Rights. 32 00:02:22,230 --> 00:02:28,650 Then at the bottom of this file will add on an export default video detail. 33 00:02:28,650 --> 00:02:30,160 All right so this is a good start. 34 00:02:30,180 --> 00:02:31,830 The video detail component. 35 00:02:31,830 --> 00:02:34,000 Now it can flip back over to the app. 36 00:02:34,200 --> 00:02:36,600 Here's my app at the top. 37 00:02:36,630 --> 00:02:42,110 I will import my video detail from video detail. 38 00:02:42,290 --> 00:02:48,820 And then I will show this component inside of my render method sit down inside the render method between 39 00:02:48,820 --> 00:02:50,720 the search bar in the video list. 40 00:02:50,770 --> 00:02:59,200 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 41 00:02:59,200 --> 00:03:06,210 for that is going to come from this state selected video. 42 00:03:06,210 --> 00:03:10,080 Now one thing to double check here is make sure that you're passing this down as a prop called video 43 00:03:10,110 --> 00:03:11,210 not videos. 44 00:03:11,220 --> 00:03:16,310 Remember we determine where we decide what we want our names to be in the video list. 45 00:03:16,320 --> 00:03:18,660 We are passing down an array of objects. 46 00:03:18,690 --> 00:03:21,610 And so it made sense to use the plural form videos. 47 00:03:21,750 --> 00:03:25,860 But in the video detail we are passing down one single object by itself. 48 00:03:25,860 --> 00:03:32,610 So instead of going to pass down the singular form name of the prop so video without an s. 49 00:03:32,630 --> 00:03:36,100 All right so let's save this and then we'll flip back over and see how we're doing. 50 00:03:37,050 --> 00:03:37,310 All right. 51 00:03:37,320 --> 00:03:41,690 So when I look back over I see a nasty error message here that says cannot read properties snippet of 52 00:03:41,750 --> 00:03:42,730 NULL. 53 00:03:42,870 --> 00:03:47,060 Now you might remember me mentioning this error message a little bit ago. 54 00:03:47,790 --> 00:03:53,820 Here's what's happening when our app component first loads up on the screen selected video is set to 55 00:03:53,820 --> 00:03:54,820 the value no. 56 00:03:54,840 --> 00:03:56,160 Right here. 57 00:03:56,160 --> 00:04:02,620 We then take that selective video on the state object and we pass it down into the video detail. 58 00:04:02,960 --> 00:04:09,520 So essentially inside the video detail this video object right here shows up as the value nil. 59 00:04:09,530 --> 00:04:15,530 We then tried to reference video snippet again on the valley knoll or you can't reference a property 60 00:04:15,530 --> 00:04:19,670 on the valley null which is why we see the error message cannot read properly snippet of no. 61 00:04:19,760 --> 00:04:24,440 And of course if you look closely at the error message even tells us the line of code that that is coming 62 00:04:24,440 --> 00:04:25,950 from. 63 00:04:25,960 --> 00:04:32,200 So in order to fix this we can add in a very simple check inside the video detail inside of your all 64 00:04:32,200 --> 00:04:41,880 say if there is no video if video does not exist then I want to return a div that has the text loading 65 00:04:42,080 --> 00:04:44,650 like so. 66 00:04:44,670 --> 00:04:49,260 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 67 00:04:49,260 --> 00:04:53,790 divx loading and we're not going to even get down here to this line of code where we attempt to reference 68 00:04:53,790 --> 00:04:56,160 the snippet property on it. 69 00:04:56,190 --> 00:04:56,360 All right. 70 00:04:56,370 --> 00:04:57,630 So let's now test this out. 71 00:04:59,630 --> 00:05:02,610 And when I flip back over I see the text that says loading right here. 72 00:05:02,660 --> 00:05:07,580 Now obviously showing the text loading on the screen without ever having it resolve into something without 73 00:05:07,580 --> 00:05:10,340 user interaction is not the best experience. 74 00:05:10,380 --> 00:05:13,800 But we're going to fix this up and improve this experience in just a little bit. 75 00:05:13,860 --> 00:05:16,320 For right now let's just try searching for something. 76 00:05:16,530 --> 00:05:21,950 It's all say buildings now I should be able to click something and see the title appear here instead 77 00:05:21,980 --> 00:05:23,480 of the text loading. 78 00:05:23,480 --> 00:05:29,930 So I click on the video and I see the title appear perfect and I can click on any of these and all the 79 00:05:29,960 --> 00:05:36,940 appropriate titles show up if I search for some other term like let's say I don't know flowers not what 80 00:05:36,940 --> 00:05:42,820 I expected but ok I can now click on these and I see the appropriate titles appear again. 81 00:05:43,770 --> 00:05:47,380 All right so it looks pretty good to take a quick pause right here. 82 00:05:47,400 --> 00:05:51,780 When we come back the next section we're going to start improving the styling of our video detail just 83 00:05:51,780 --> 00:05:52,400 a little bit.