So we now have a functional video list component and it has an array of videos to surrender. 2
All you have to do now is render one video list item per video. 3
And we're going to be in a pretty good spot. 4
So luckily making lists with re-act is pretty darn straightforward. 5
Our video list component receives props you know prop stock videos that contains an array of videos 6
. 7
So we'll just loop over this array. 8
And for each video will generate one instance of video list item. 9
So let's go ahead and give this a shot first. 10
We're going to go ahead and we haven't done anything in video yet. 11
List item yet but we'll go ahead and import it anyways and then put some code in there and a little 12
bit. 13
So imports video list item from. 14
And we're in the component structure right now so I'll say current directory video list item. 15
OK. 16
I'm going to remove the length printout right there. 17
Right now we don't really need it anymore. 18
So next thing we can do is we're going to build our loop. 19
And when I say loop here I don't actually mean a for loop javascript for javascript's for loops. 20
You know leave a little bit to be desired. 21
In general I really advise you to stay away from four loops as much as possible. 22
Instead try to be using built in iterators instead like the built in MAP iterator. 23
If you've never used map before no problem let's do let's flip over to the console and do a quick demo 24
. 25
So if you're just turning off on Javascript you might be used to iterating iterating over a array by 26
doing something like this. 27
You might say var array was one to three. 28
And then you'll say something like for var i equals zero. 29
You know why less than right length I plus plus and Blackwall that all that stuff all that stuff is 30
you know it gets kind of a confusing sometimes easy to make a typo. 31
A lot of areas to make a mistake. 32
So instead we're going to use a builtin helper called Map. 33
A map is a property of an array. 34
So you can see here that it's when I say a radar map returns a function. 35
If I declare an array of 1 to 3 and then I pass map a function it will get called with each element 36
in the array. 37
So I can say number you dial this up a little bit and will say return number times 2. 38
So each element of the array will be passed into this function one at a time. 39
So the functions in the ran a total of three times first with one then two and then three. 40
A radar map is going to return a new array where each index is the return value of the function. 41
So I get to 4 6 because first one went in. 42
We multiply that by two and resulted in two then two went in multiplied by two that resulted in four 43
and then three went in Multiply that by two. 44
And that resulted in six. 45
So as you might imagine using maps are really fun or really fantastic when building lists in react. 46
We can do something like instead of say returning number of times to what if we did something like this 47
. 48
And this is an actual GSX you know this is just a string. 49
Let's just pretend it's GSX for a second div plus number plus closing tag div. 50
Look at this. 51
I end up with div one of two div three if you can imagine that these were actual you know GSX tags. 52
I would end up with an array of GSX you know something that I could render with re-act possibly will 53
figure that part out. 54
OK let's go ahead and give this map a shot. 55
First thing we'll do is first we'll set up our video list items since we haven't done that just yet 56
. 57
So over in video list item we'll put some boiler plate down. 58
We'll say import re-act from re-act concert video list item props and we'll return just a UL excuse 59
me an ally 60
that just says video. 61
And then at the bottom you'll export default video list item. 62
Cool. 63
So now each video list item which is intended to show a single video you know a thumbnail and a title 64
for right now is just going to show a single lie that says video. 65
Now back over and video list we can start putting our list together. 66
So appear at the top we can say prop's videos map and to do this and all that more concise term. 67
We're going to use an arrow function rather than the function that we used over here in the console 68
. 69
So for each element of videos will have a function that gets called with a single video and it will 70
define our arrow function and will return a video list item and we'll pass it. 71
The video as a property named video. 72
OK let's see we need to do is save an actual reference to this array that gets returned. 73
So say Konst video items equals the result of this mapping function. 74
Finally we'll add it as GSX. 75
Since we're referencing a javascript variable we'll use curly braces and will say video items. 76
OK. 77
So a quick note here re-act is very intelligent intelligent about rendering arrays of items. 78
Notice that you know I've got an array here it's return another array. 79
We do know that it's an array of components but it is an array. 80
Right. 81
So this variable right here is going to end up as an array that we're passing to react totally ok. 82
Re-act is going to recognize that it's a list or an array of components. 83
And it's going to try to render all the lies in the here inside of the UL. 84
So let's go ahead and give this a shot. 85
I'm going to flip back over to Chrome. 86
Let's refresh and we get video video video video. 87
Five times one for each video. 88
Awesome looking at the console. 89
However we do have a big wall it's a warning but it is red. 90
So I guess you kind of say it's an Air. 91
Let's discuss this whirring in the next section.