1 00:00:01,080 --> 00:00:04,790 So are app components now getting real useful data in it. 2 00:00:05,220 --> 00:00:10,390 But it's first rendered it does a search for surfboards and it gets it gets the response back on this 3 00:00:10,390 --> 00:00:12,090 start state. 4 00:00:12,120 --> 00:00:16,470 So we're now really ready to do some heavy lifting on the three components that are going to display 5 00:00:16,470 --> 00:00:17,430 that data. 6 00:00:17,430 --> 00:00:22,860 The video detail the list and the list item in this section we're going to focus on the list and the 7 00:00:22,860 --> 00:00:25,960 list item and putting those components together. 8 00:00:26,270 --> 00:00:34,500 So let's start with the parent of the two the video list this component here doesn't really have any 9 00:00:34,500 --> 00:00:35,420 need for state. 10 00:00:35,430 --> 00:00:37,640 It doesn't record any user interaction. 11 00:00:37,650 --> 00:00:39,790 It doesn't directorates off in any fashion. 12 00:00:39,930 --> 00:00:43,360 So we can really just make it a plain functional component. 13 00:00:43,770 --> 00:00:45,590 Let's get to it at the top. 14 00:00:45,600 --> 00:00:57,490 We'll import re-act from re-act then we'll define our function possed video list is a federal function 15 00:00:57,500 --> 00:00:57,980 . 16 00:00:58,290 --> 00:01:00,840 And for right now we'll just have it return 17 00:01:03,570 --> 00:01:04,830 a UL 18 00:01:07,380 --> 00:01:10,200 because it's going to be a list of different videos. 19 00:01:10,890 --> 00:01:13,730 So the list is a pretty visual component. 20 00:01:13,740 --> 00:01:18,120 So let's start thinking about adding some classic means to get some styling in here at the same time 21 00:01:18,120 --> 00:01:18,980 . 22 00:01:19,110 --> 00:01:22,450 I've already included bootstrapping with this project in the index. 23 00:01:22,450 --> 00:01:23,760 It's T.M. file. 24 00:01:23,850 --> 00:01:25,400 You'll see it on here as well. 25 00:01:25,500 --> 00:01:31,260 Your copy will have it in here as well and it's currently using the V for version the latest of bootstrap 26 00:01:31,260 --> 00:01:31,760 . 27 00:01:32,250 --> 00:01:37,250 So we can make use of a lot of built in CLOS means to get some pretty reasonable styling on here. 28 00:01:37,530 --> 00:01:47,190 So we'll add a class to the UL adding a class is very similar to adding a class CSSA class or normal 29 00:01:47,440 --> 00:01:48,420 mail. 30 00:01:48,420 --> 00:01:53,790 The only difference is that instead of using the class keyword we use slightly different one use class 31 00:01:53,910 --> 00:02:01,380 name we use class name and sort of class just because if we used Clouser V A lot of naming conflicts 32 00:02:01,650 --> 00:02:05,420 with a key word class or use we define a class based component. 33 00:02:05,520 --> 00:02:07,670 And I just said the word class many many times. 34 00:02:07,680 --> 00:02:10,380 So that's the last time nomer class. 35 00:02:10,380 --> 00:02:10,720 All right. 36 00:02:10,740 --> 00:02:20,010 So the class I did it are going to say we're going to use call M.D for which will set this as a bootstrap 37 00:02:20,010 --> 00:02:26,340 column of with four and we'll give it a list group as well. 38 00:02:27,320 --> 00:02:27,700 OK. 39 00:02:27,720 --> 00:02:28,480 So just empty. 40 00:02:28,490 --> 00:02:30,980 Well it has a class name. 41 00:02:31,350 --> 00:02:38,430 Let's go ahead and export this component so that other files can make use of it as well. 42 00:02:38,430 --> 00:02:44,130 The bottom will add export default video list. 43 00:02:44,130 --> 00:02:45,970 It will save it. 44 00:02:46,010 --> 00:02:55,230 Finally let's go back over to our index stodginess file and at the top we'll import our video list. 45 00:02:55,320 --> 00:02:58,110 Now remember it's a file that we created. 46 00:02:58,140 --> 00:03:02,100 So the From needs to be a path reference. 47 00:03:02,100 --> 00:03:10,220 So we'll start in the current directory dot slash into components components components. 48 00:03:10,360 --> 00:03:16,050 It's the real video on the score list. 49 00:03:16,200 --> 00:03:28,290 Finally we'll add it into the apps render method video list like so nice and easy. 50 00:03:28,470 --> 00:03:37,110 Now here's kind of an interesting thought app is the parent to video list video list needs get access 51 00:03:37,500 --> 00:03:39,600 to the videos that are on the App State. 52 00:03:39,630 --> 00:03:40,870 Right. 53 00:03:40,870 --> 00:03:46,440 Or a list of videos at any given time inside of app or this dot state DOT videos and video list needs 54 00:03:46,460 --> 00:03:49,380 right needs a reference that needs that list of videos. 55 00:03:49,680 --> 00:03:57,450 So basically we need to pass some data from the parent component app into the child component video 56 00:03:57,450 --> 00:04:03,420 list as you might imagine re-act has us covered for this use case passing data from the parent component 57 00:04:03,480 --> 00:04:08,160 app to the child component video list is really quite straightforward. 58 00:04:08,340 --> 00:04:15,960 We passed a list of videos just by defining a property on the GSX J S X tag. 59 00:04:16,140 --> 00:04:22,890 So we'll say videos equals and then we're going to make reference to a javascript variable. 60 00:04:22,950 --> 00:04:31,110 So we're gonna use curly braces will say this dot state DOT videos passing data like this is referred 61 00:04:31,110 --> 00:04:39,660 to as passing prop's in re-act the data that we're passing from app to video list videos is referred 62 00:04:39,660 --> 00:04:46,290 to as a prop so we're passing prop videos to video list any time that opery renders. 63 00:04:46,290 --> 00:04:52,920 Like when we you know set stay on the component video list we'll get the new list of videos as well 64 00:04:55,650 --> 00:04:58,080 when we use a social component. 65 00:04:58,080 --> 00:05:01,890 This prop's object will arrive as an argument to the function. 66 00:05:01,980 --> 00:05:06,020 So those props will arrive as an object called props. 67 00:05:06,030 --> 00:05:11,170 And you can imagine that in here you would then have a say like concert videos equals props top videos 68 00:05:11,180 --> 00:05:11,570 . 69 00:05:11,790 --> 00:05:15,410 And this would be an array of videos. 70 00:05:17,130 --> 00:05:24,510 OK let's give this a shot and see if it's working in our browser or Sewanee in video list. 71 00:05:24,510 --> 00:05:30,160 I'm just going to go ahead and add a curly brace and we'll say props start videos later. 72 00:05:30,630 --> 00:05:34,920 So we're gonna say any video re the videos array that gets passed in here we're just going to print 73 00:05:34,920 --> 00:05:36,160 the length out. 74 00:05:36,300 --> 00:05:39,060 So I'm going to go ahead and save both components. 75 00:05:39,090 --> 00:05:43,430 Let's flip over and refresh and you'll see that we got five here. 76 00:05:43,950 --> 00:05:48,810 So that means that we successfully fetch five videos and pass out a list of five videos down into a 77 00:05:48,810 --> 00:05:50,070 video list. 78 00:05:50,070 --> 00:05:54,410 Now if you refresh the page you'll notice it for just half a second. 79 00:05:54,510 --> 00:05:56,970 You see the zero in there. 80 00:05:56,970 --> 00:06:00,660 I don't know if you can see it but it basically it's zero it just feel the barest half second and then 81 00:06:00,660 --> 00:06:02,150 it turns into five. 82 00:06:02,310 --> 00:06:03,630 So why is that. 83 00:06:04,170 --> 00:06:05,930 Well it's pretty straightforward. 84 00:06:06,150 --> 00:06:11,590 We initialize our state to the start state of videos to an empty array. 85 00:06:11,760 --> 00:06:12,810 Right. 86 00:06:12,990 --> 00:06:14,890 And then we kick off our search. 87 00:06:14,910 --> 00:06:17,270 The search is not an instantaneous operation. 88 00:06:17,280 --> 00:06:22,050 It's a network request it takes like some amount of time and you know a missile or an arbitrary amount 89 00:06:22,050 --> 00:06:26,820 of time we don't really know how long it's going to take it all because it's a network Reclast in between 90 00:06:26,880 --> 00:06:35,460 the time that takes the first render of the component to fetching the data and suddenly it on our state 91 00:06:35,460 --> 00:06:35,580 . 92 00:06:35,580 --> 00:06:41,370 That can be something like say 200 milliseconds and during that time the length of videos is equal to 93 00:06:41,370 --> 00:06:42,060 zero. 94 00:06:42,270 --> 00:06:45,500 So that's why we see zero for half a second. 95 00:06:45,570 --> 00:06:49,560 And then the request completes and we get our list of five videos. 96 00:06:50,110 --> 00:06:50,840 OK. 97 00:06:51,360 --> 00:06:59,070 So one quick thing to mention in a functional component the props object as an argument in a class object 98 00:06:59,550 --> 00:07:05,840 excuse me a class based component props are available anywhere in any method we define as this start 99 00:07:05,880 --> 00:07:06,660 process. 100 00:07:06,810 --> 00:07:12,900 So we could say like in our render method we can say this dot props if our app was being passed some 101 00:07:12,900 --> 00:07:17,450 component or some properties by its by some imaginary parent component. 102 00:07:18,240 --> 00:07:24,240 So it's very important that you know whenever we re factory component from being a function based component 103 00:07:24,270 --> 00:07:29,370 to a class based component we will need to go through and update all of our references from just props 104 00:07:29,370 --> 00:07:31,710 to this process. 105 00:07:31,740 --> 00:07:34,280 So something to keep in mind when doing that refactor. 106 00:07:34,790 --> 00:07:39,730 OK so now we were successfully communicating from index down into video list. 107 00:07:39,840 --> 00:07:41,750 Let's continue in the next section.