1 00:00:00,980 --> 00:00:06,440 In the last section we got our list of videos into our video list component. 2 00:00:06,440 --> 00:00:10,760 Now one thing I want to fix up inside of you right away something that you're going to see done in many 3 00:00:10,760 --> 00:00:15,060 locations is rather than referencing props start videos inside of your. 4 00:00:15,140 --> 00:00:22,520 We could instead do structure using as 20:15 syntax just the videos property out of the props object 5 00:00:23,060 --> 00:00:23,710 to do so. 6 00:00:23,750 --> 00:00:26,410 I'm going to remove the props argument. 7 00:00:26,480 --> 00:00:32,240 I will place a set of parentheses and then a set of curly braces inside there and then inside the curly 8 00:00:32,240 --> 00:00:32,720 braces. 9 00:00:32,750 --> 00:00:33,260 All right. 10 00:00:33,320 --> 00:00:34,480 Videos. 11 00:00:34,490 --> 00:00:40,740 So now instead of referencing props repetitively inside this component we could do simply video length. 12 00:00:40,840 --> 00:00:44,990 Now of course we don't want to just print out the number of videos we actually want to render them out 13 00:00:45,050 --> 00:00:46,310 as a list. 14 00:00:46,310 --> 00:00:53,020 So inside this video we're going to start to focus on creating the video item components. 15 00:00:53,240 --> 00:00:58,220 We're going to create the video item we're going to end up having multiple video items when our application 16 00:00:58,250 --> 00:00:59,650 is rendered on the screen. 17 00:00:59,810 --> 00:01:04,760 And every video item component is going to receive a separate video object. 18 00:01:04,760 --> 00:01:10,590 So each video item will be customized to display a slightly different video. 19 00:01:10,590 --> 00:01:11,700 All right let's get to it. 20 00:01:11,700 --> 00:01:15,390 I'm going to flip back over to my editor and study my components directory. 21 00:01:15,390 --> 00:01:18,450 I'm going to make a new file called the video item. 22 00:01:18,520 --> 00:01:29,130 J.S. then inside of your well put together a little bit of GSX to make a functional component as well. 23 00:01:33,760 --> 00:01:43,900 And then inside here all say return about just a div that says video item for now and then let's get 24 00:01:43,900 --> 00:01:50,780 that expert default at the bottom like so I guess now that we've got the video item put together we're 25 00:01:50,780 --> 00:01:53,810 going to flip back over to the video list. 26 00:01:54,200 --> 00:01:55,300 Here's the video list. 27 00:01:56,120 --> 00:01:59,520 At the top we're going to import the video item we just created. 28 00:01:59,570 --> 00:02:02,450 We will then map over this video's array. 29 00:02:02,450 --> 00:02:07,810 And for every video inside there we will render one single video item component. 30 00:02:07,820 --> 00:02:12,440 I apologize for going kind of slow right now but I've found I've built this out and of course before 31 00:02:12,740 --> 00:02:17,570 and I've found that all this terminology or the word video being repeated all over the place very quickly 32 00:02:17,570 --> 00:02:21,380 gets really confusing so I just want to make sure that it's really crystal clear what we're doing right 33 00:02:21,380 --> 00:02:22,370 now. 34 00:02:22,370 --> 00:02:22,600 All right. 35 00:02:22,610 --> 00:02:31,520 So at the top of that video list we are going to import video item from the video item file. 36 00:02:31,770 --> 00:02:38,940 Then inside of this functional component I'm going to take the video Saray this right here is an array 37 00:02:38,940 --> 00:02:42,280 pass from the app component and we're going to map over it. 38 00:02:42,300 --> 00:02:49,820 Remember we pass this inner function that we pass to map a single argument video like so. 39 00:02:49,860 --> 00:02:55,260 So inside of that video is array there are many objects which we are referring to video and that's one 40 00:02:55,260 --> 00:02:56,070 video right there. 41 00:02:56,070 --> 00:03:00,920 This inner function will be called one time for every object inside the videos. 42 00:03:01,020 --> 00:03:02,490 It's now inside of here. 43 00:03:02,640 --> 00:03:09,640 We're going to return a video item component we eventually will take this video argument right here 44 00:03:09,670 --> 00:03:11,810 and pass it as a prop and to video item. 45 00:03:11,860 --> 00:03:15,120 But for right now let's just focus on getting the list to appear on the screen. 46 00:03:16,500 --> 00:03:21,810 So when we map over this array it's going to return a brand new array which is now going to contain 47 00:03:21,870 --> 00:03:24,630 a list of different video item components. 48 00:03:24,690 --> 00:03:32,200 I'm going to assign that list of components to a variable called rendered list like so. 49 00:03:32,490 --> 00:03:40,170 So I now say Konst render lists is going to be the result of mapping over the videos array and now down 50 00:03:40,170 --> 00:03:44,530 inside of our turn statement down here rather than referring to video saut length. 51 00:03:44,640 --> 00:03:49,720 I'm going to instead printout rendered list like so. 52 00:03:49,740 --> 00:03:49,970 All right. 53 00:03:49,980 --> 00:03:54,550 This is a good place to save and test out to make sure that we don't have any obvious errors. 54 00:03:54,570 --> 00:04:00,780 So I going to save the file flip back over to my application and then search for something you are going 55 00:04:00,780 --> 00:04:06,690 to see a warning down here about a key prop but you should also see video item printed on the screen 56 00:04:06,780 --> 00:04:08,070 five times. 57 00:04:08,370 --> 00:04:12,750 If you see any other errors at this point it means that you very likely have a typo either inside the 58 00:04:12,750 --> 00:04:13,570 video list. 59 00:04:13,590 --> 00:04:15,680 So compare your contents with mine. 60 00:04:15,990 --> 00:04:18,550 Or do you have a small typo inside of the video item. 61 00:04:18,570 --> 00:04:21,960 So also compare your contents with mine. 62 00:04:21,980 --> 00:04:22,210 All right. 63 00:04:22,210 --> 00:04:24,860 So now we've got this list of records appearing on the screen. 64 00:04:24,890 --> 00:04:26,300 Let's take another quick break. 65 00:04:26,300 --> 00:04:30,440 When we come back the next section we're going to make sure that we take each of these video objects 66 00:04:30,680 --> 00:04:35,870 and pass them as a prop down into each video item that we create and we'll use that to customize the 67 00:04:35,870 --> 00:04:38,000 contents of the video item component. 68 00:04:38,300 --> 00:04:40,640 So quick pause and I'll see you in just a minute.