1 00:00:00,390 --> 00:00:04,110 The last video we saw how to implement the video detail component. 2 00:00:04,500 --> 00:00:09,420 So now in this video, we'll see how to implement the video list and then video item component. 3 00:00:10,020 --> 00:00:13,740 So here instead of video list, let me know that. 4 00:00:15,240 --> 00:00:15,810 VIDEO. 5 00:00:16,860 --> 00:00:17,220 Let's. 6 00:00:19,790 --> 00:00:20,810 But some props. 7 00:00:23,750 --> 00:00:25,130 The first stop will be video. 8 00:00:26,320 --> 00:00:28,120 Will be reduce. 9 00:00:30,380 --> 00:00:33,590 All the leaders have presented and answer on video select. 10 00:00:37,260 --> 00:00:38,430 Said select relatives. 11 00:00:40,490 --> 00:00:42,530 Said Senator Williams. 12 00:00:43,280 --> 00:00:48,800 So what we are doing is first of sending the videos deliberately so what we do to this planet as alleged. 13 00:00:49,130 --> 00:00:54,170 And then on reducing it, if we are selecting wonders like if you are inheriting the third video from 14 00:00:54,170 --> 00:00:59,270 the video on the right side of the list, then that video should come in to the left side and be visible 15 00:00:59,270 --> 00:01:03,350 in the frame so that how to do will be sending a function called, said Senator. 16 00:01:03,590 --> 00:01:09,170 That means we are sending this function so that we can select the selected video and change accordingly 17 00:01:09,170 --> 00:01:10,940 on what we don't use that is selected. 18 00:01:11,420 --> 00:01:13,640 So now we have to import the video list. 19 00:01:16,090 --> 00:01:16,720 In Port. 20 00:01:18,370 --> 00:01:18,910 VIDEO. 21 00:01:20,250 --> 00:01:20,700 Just. 22 00:01:27,060 --> 00:01:32,340 From our flash components flash video. 23 00:01:36,800 --> 00:01:40,730 So I'll go to the Really or J6 now here will read the quote. 24 00:01:43,750 --> 00:01:45,550 Trusting in both. 25 00:01:47,330 --> 00:01:47,930 React. 26 00:01:49,960 --> 00:01:50,680 From the act. 27 00:01:53,490 --> 00:01:53,910 Import what? 28 00:01:54,990 --> 00:01:58,380 We'll be using the grid components of material, you wait, so we'll. 29 00:02:00,000 --> 00:02:00,540 What grade? 30 00:02:03,480 --> 00:02:04,230 From material you. 31 00:02:11,940 --> 00:02:12,680 Slash caught. 32 00:02:16,390 --> 00:02:19,930 Now, what do we have to do is we'll be building a video item. 33 00:02:20,470 --> 00:02:20,830 OK? 34 00:02:21,250 --> 00:02:28,240 This video item means each video that we'll have like, we'll have a list of five units on the writer 35 00:02:28,540 --> 00:02:29,380 similar to YouTube. 36 00:02:29,710 --> 00:02:32,920 And then each item of that we really need is a video item. 37 00:02:33,490 --> 00:02:35,800 So that will important in the next video. 38 00:02:36,190 --> 00:02:39,060 As of now, we continue with video list. 39 00:02:39,130 --> 00:02:43,290 There's the written part the basic coding business logic behind the video list. 40 00:02:46,230 --> 00:02:48,360 We'll be getting radios and. 41 00:02:49,300 --> 00:02:49,720 On. 42 00:02:50,800 --> 00:02:51,340 Select. 43 00:02:52,790 --> 00:02:53,240 We will. 44 00:02:55,660 --> 00:03:01,080 So lot of this is that basically the problem that we are sending in-app purchase the videos and select 45 00:03:01,270 --> 00:03:05,530 on select video props that we are catching our videos and on select video. 46 00:03:12,960 --> 00:03:13,350 Now. 47 00:03:15,140 --> 00:03:19,640 Now, basically, what we have to do, we have to have done to Great Britain. 48 00:03:24,650 --> 00:03:24,920 Great. 49 00:03:30,010 --> 00:03:31,030 This stuff really was. 50 00:03:36,270 --> 00:03:37,320 It should be container. 51 00:03:38,560 --> 00:03:38,800 And. 52 00:03:39,920 --> 00:03:42,740 Spacing and. 53 00:03:44,360 --> 00:03:45,890 So what this is doing is. 54 00:03:48,300 --> 00:03:52,230 And then we export we have it, we will export the default, honest. 55 00:03:56,040 --> 00:04:02,080 So what this is doing is we are running a grid that contains the whole right part of that and will continue 56 00:04:02,080 --> 00:04:03,030 on the list of values. 57 00:04:03,180 --> 00:04:06,560 So what is this stuff of this is for Disney after the clarity. 58 00:04:08,840 --> 00:04:09,470 Constant. 59 00:04:11,090 --> 00:04:13,040 Lots of videos. 60 00:04:17,950 --> 00:04:20,560 Radios dot the map. 61 00:04:23,150 --> 00:04:26,000 VIDEO, I'll explain your time writing in a while. 62 00:04:26,660 --> 00:04:28,490 That's right, the court as of now. 63 00:04:33,510 --> 00:04:37,230 Should be the ideal item. 64 00:04:41,440 --> 00:04:44,660 On select radio question. 65 00:04:45,650 --> 00:04:47,050 On select. 66 00:04:48,460 --> 00:04:48,880 We do. 67 00:04:54,530 --> 00:04:56,240 There should be a key to that radio. 68 00:04:57,610 --> 00:05:00,110 VIDEO not IED. 69 00:05:00,580 --> 00:05:01,610 Not really. 70 00:05:03,800 --> 00:05:04,790 The video will be video. 71 00:05:20,100 --> 00:05:24,810 So basically, what is this, meaning what is this part of doing? 72 00:05:25,320 --> 00:05:29,910 First thing they see the videos in this videos are object. 73 00:05:30,120 --> 00:05:34,170 We're having all the array like the details of all the videos that are furious. 74 00:05:34,470 --> 00:05:35,700 So now we'll map. 75 00:05:35,950 --> 00:05:40,530 Map means it is basically a form of using a fire loop on each and every item. 76 00:05:40,920 --> 00:05:44,580 So we are getting a single video every, every little, a lot of our look. 77 00:05:44,910 --> 00:05:49,200 And for that video, we are passing it to a video item component. 78 00:05:49,410 --> 00:05:51,960 We are sending that we do and then the key of the video. 79 00:05:52,140 --> 00:05:58,020 So whenever we are using a map function and using component in Z map function, this key this key prop 80 00:05:58,040 --> 00:06:02,390 is a good practice of because each and every component should be off unique key. 81 00:06:02,760 --> 00:06:05,940 So when we are using insert a map function of component, we have to give up. 82 00:06:06,360 --> 00:06:09,150 The key will be the video itself because every video is unique. 83 00:06:09,360 --> 00:06:11,730 So that's that's why the case should be unique. 84 00:06:12,810 --> 00:06:17,730 And then the video that we are sending to this video item is the single item of every detail of the 85 00:06:17,730 --> 00:06:17,990 fire. 86 00:06:18,000 --> 00:06:20,880 Look at the map function and on select video. 87 00:06:20,880 --> 00:06:25,620 If the video is that, it should be like appearing on the left side as a film. 88 00:06:25,890 --> 00:06:31,380 So for that business logic, as I said before, we have to import the video item on song and import 89 00:06:31,380 --> 00:06:31,650 that. 90 00:06:32,830 --> 00:06:34,740 Import radio. 91 00:06:37,210 --> 00:06:37,720 Item. 92 00:06:39,640 --> 00:06:40,630 From Northwest. 93 00:06:41,720 --> 00:06:43,100 We do I. 94 00:06:45,130 --> 00:06:47,440 So basically, we have completed the court for video list. 95 00:06:47,710 --> 00:06:50,380 So now what the doing said the video item. 96 00:06:50,770 --> 00:06:55,420 So basically, when you go into that, you have to create a component called video item. 97 00:06:56,480 --> 00:06:56,930 VIDEO. 98 00:06:58,530 --> 00:07:00,390 I do not discuss. 99 00:07:02,500 --> 00:07:08,650 Once you create the component here, we'll be using great paper typography and a small function to display 100 00:07:08,650 --> 00:07:09,700 all these radios. 101 00:07:09,700 --> 00:07:14,920 All these five videos that we are getting from the YouTube may on the right side of the landing page 102 00:07:15,160 --> 00:07:19,090 so that the porting part of the video item component will see in the next to.