So are app components now getting real useful data in it. 2
But it's first rendered it does a search for surfboards and it gets it gets the response back on this 3
start state. 4
So we're now really ready to do some heavy lifting on the three components that are going to display 5
that data. 6
The video detail the list and the list item in this section we're going to focus on the list and the 7
list item and putting those components together. 8
So let's start with the parent of the two the video list this component here doesn't really have any 9
need for state. 10
It doesn't record any user interaction. 11
It doesn't directorates off in any fashion. 12
So we can really just make it a plain functional component. 13
Let's get to it at the top. 14
We'll import re-act from re-act then we'll define our function possed video list is a federal function 15
. 16
And for right now we'll just have it return 17
a UL 18
because it's going to be a list of different videos. 19
So the list is a pretty visual component. 20
So let's start thinking about adding some classic means to get some styling in here at the same time 21
. 22
I've already included bootstrapping with this project in the index. 23
It's T.M. file. 24
You'll see it on here as well. 25
Your copy will have it in here as well and it's currently using the V for version the latest of bootstrap 26
. 27
So we can make use of a lot of built in CLOS means to get some pretty reasonable styling on here. 28
So we'll add a class to the UL adding a class is very similar to adding a class CSSA class or normal 29
mail. 30
The only difference is that instead of using the class keyword we use slightly different one use class 31
name we use class name and sort of class just because if we used Clouser V A lot of naming conflicts 32
with a key word class or use we define a class based component. 33
And I just said the word class many many times. 34
So that's the last time nomer class. 35
All right. 36
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
column of with four and we'll give it a list group as well. 38
OK. 39
So just empty. 40
Well it has a class name. 41
Let's go ahead and export this component so that other files can make use of it as well. 42
The bottom will add export default video list. 43
It will save it. 44
Finally let's go back over to our index stodginess file and at the top we'll import our video list. 45
Now remember it's a file that we created. 46
So the From needs to be a path reference. 47
So we'll start in the current directory dot slash into components components components. 48
It's the real video on the score list. 49
Finally we'll add it into the apps render method video list like so nice and easy. 50
Now here's kind of an interesting thought app is the parent to video list video list needs get access 51
to the videos that are on the App State. 52
Right. 53
Or a list of videos at any given time inside of app or this dot state DOT videos and video list needs 54
right needs a reference that needs that list of videos. 55
So basically we need to pass some data from the parent component app into the child component video 56
list as you might imagine re-act has us covered for this use case passing data from the parent component 57
app to the child component video list is really quite straightforward. 58
We passed a list of videos just by defining a property on the GSX J S X tag. 59
So we'll say videos equals and then we're going to make reference to a javascript variable. 60
So we're gonna use curly braces will say this dot state DOT videos passing data like this is referred 61
to as passing prop's in re-act the data that we're passing from app to video list videos is referred 62
to as a prop so we're passing prop videos to video list any time that opery renders. 63
Like when we you know set stay on the component video list we'll get the new list of videos as well 64
when we use a social component. 65
This prop's object will arrive as an argument to the function. 66
So those props will arrive as an object called props. 67
And you can imagine that in here you would then have a say like concert videos equals props top videos 68
. 69
And this would be an array of videos. 70
OK let's give this a shot and see if it's working in our browser or Sewanee in video list. 71
I'm just going to go ahead and add a curly brace and we'll say props start videos later. 72
So we're gonna say any video re the videos array that gets passed in here we're just going to print 73
the length out. 74
So I'm going to go ahead and save both components. 75
Let's flip over and refresh and you'll see that we got five here. 76
So that means that we successfully fetch five videos and pass out a list of five videos down into a 77
video list. 78
Now if you refresh the page you'll notice it for just half a second. 79
You see the zero in there. 80
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
it turns into five. 82
So why is that. 83
Well it's pretty straightforward. 84
We initialize our state to the start state of videos to an empty array. 85
Right. 86
And then we kick off our search. 87
The search is not an instantaneous operation. 88
It's a network request it takes like some amount of time and you know a missile or an arbitrary amount 89
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
the time that takes the first render of the component to fetching the data and suddenly it on our state 91
. 92
That can be something like say 200 milliseconds and during that time the length of videos is equal to 93
zero. 94
So that's why we see zero for half a second. 95
And then the request completes and we get our list of five videos. 96
OK. 97
So one quick thing to mention in a functional component the props object as an argument in a class object 98
excuse me a class based component props are available anywhere in any method we define as this start 99
process. 100
So we could say like in our render method we can say this dot props if our app was being passed some 101
component or some properties by its by some imaginary parent component. 102
So it's very important that you know whenever we re factory component from being a function based component 103
to a class based component we will need to go through and update all of our references from just props 104
to this process. 105
So something to keep in mind when doing that refactor. 106
OK so now we were successfully communicating from index down into video list. 107
Let's continue in the next section.