1

00:00:00,240  -->  00:00:06,400
So we now have a functional video list component and it has an array of videos to surrender.

2

00:00:06,560  -->  00:00:10,610
All you have to do now is render one video list item per video.

3

00:00:10,650  -->  00:00:12,660
And we're going to be in a pretty good spot.

4

00:00:13,020  -->  00:00:16,600
So luckily making lists with re-act is pretty darn straightforward.

5

00:00:16,620  -->  00:00:23,400
Our video list component receives props you know prop stock videos that contains an array of videos

6

00:00:23,420  -->  00:00:23,490
.

7

00:00:23,550  -->  00:00:25,610
So we'll just loop over this array.

8

00:00:25,770  -->  00:00:30,590
And for each video will generate one instance of video list item.

9

00:00:30,600  -->  00:00:33,910
So let's go ahead and give this a shot first.

10

00:00:34,200  -->  00:00:37,020
We're going to go ahead and we haven't done anything in video yet.

11

00:00:37,020  -->  00:00:41,370
List item yet but we'll go ahead and import it anyways and then put some code in there and a little

12

00:00:41,370  -->  00:00:42,070
bit.

13

00:00:42,110  -->  00:00:47,950
So imports video list item from.

14

00:00:48,240  -->  00:00:56,600
And we're in the component structure right now so I'll say current directory video list item.

15

00:00:57,330  -->  00:00:58,000
OK.

16

00:00:58,620  -->  00:01:01,380
I'm going to remove the length printout right there.

17

00:01:01,380  -->  00:01:03,390
Right now we don't really need it anymore.

18

00:01:03,810  -->  00:01:06,640
So next thing we can do is we're going to build our loop.

19

00:01:06,660  -->  00:01:14,030
And when I say loop here I don't actually mean a for loop javascript for javascript's for loops.

20

00:01:14,310  -->  00:01:17,120
You know leave a little bit to be desired.

21

00:01:17,130  -->  00:01:21,500
In general I really advise you to stay away from four loops as much as possible.

22

00:01:21,660  -->  00:01:27,720
Instead try to be using built in iterators instead like the built in MAP iterator.

23

00:01:27,990  -->  00:01:33,090
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

00:01:33,100  -->  00:01:33,920
.

25

00:01:34,770  -->  00:01:41,190
So if you're just turning off on Javascript you might be used to iterating iterating over a array by

26

00:01:41,190  -->  00:01:42,530
doing something like this.

27

00:01:42,600  -->  00:01:47,400
You might say var array was one to three.

28

00:01:47,820  -->  00:01:52,470
And then you'll say something like for var i equals zero.

29

00:01:52,500  -->  00:02:00,930
You know why less than right length I plus plus and Blackwall that all that stuff all that stuff is

30

00:02:00,960  -->  00:02:04,660
you know it gets kind of a confusing sometimes easy to make a typo.

31

00:02:04,760  -->  00:02:06,550
A lot of areas to make a mistake.

32

00:02:06,570  -->  00:02:11,810
So instead we're going to use a builtin helper called Map.

33

00:02:12,870  -->  00:02:14,790
A map is a property of an array.

34

00:02:14,820  -->  00:02:20,340
So you can see here that it's when I say a radar map returns a function.

35

00:02:20,340  -->  00:02:29,190
If I declare an array of 1 to 3 and then I pass map a function it will get called with each element

36

00:02:29,280  -->  00:02:30,120
in the array.

37

00:02:30,450  -->  00:02:40,720
So I can say number you dial this up a little bit and will say return number times 2.

38

00:02:41,790  -->  00:02:47,200
So each element of the array will be passed into this function one at a time.

39

00:02:47,280  -->  00:02:52,800
So the functions in the ran a total of three times first with one then two and then three.

40

00:02:53,460  -->  00:03:00,320
A radar map is going to return a new array where each index is the return value of the function.

41

00:03:01,380  -->  00:03:06,360
So I get to 4 6 because first one went in.

42

00:03:06,390  -->  00:03:12,840
We multiply that by two and resulted in two then two went in multiplied by two that resulted in four

43

00:03:13,350  -->  00:03:15,490
and then three went in Multiply that by two.

44

00:03:15,510  -->  00:03:17,310
And that resulted in six.

45

00:03:17,760  -->  00:03:25,440
So as you might imagine using maps are really fun or really fantastic when building lists in react.

46

00:03:25,440  -->  00:03:32,610
We can do something like instead of say returning number of times to what if we did something like this

47

00:03:32,650  -->  00:03:32,750
.

48

00:03:32,820  -->  00:03:35,390
And this is an actual GSX you know this is just a string.

49

00:03:35,400  -->  00:03:46,230
Let's just pretend it's GSX for a second div plus number plus closing tag div.

50

00:03:46,530  -->  00:03:47,510
Look at this.

51

00:03:47,640  -->  00:03:54,360
I end up with div one of two div three if you can imagine that these were actual you know GSX tags.

52

00:03:54,480  -->  00:04:00,710
I would end up with an array of GSX you know something that I could render with re-act possibly will

53

00:04:00,720  -->  00:04:02,150
figure that part out.

54

00:04:02,740  -->  00:04:07,340
OK let's go ahead and give this map a shot.

55

00:04:07,800  -->  00:04:12,450
First thing we'll do is first we'll set up our video list items since we haven't done that just yet

56

00:04:12,500  -->  00:04:12,730
.

57

00:04:13,140  -->  00:04:16,990
So over in video list item we'll put some boiler plate down.

58

00:04:17,010  -->  00:04:33,930
We'll say import re-act from re-act concert video list item props and we'll return just a UL excuse

59

00:04:33,930  -->  00:04:34,640
me an ally

60

00:04:37,580  -->  00:04:41,460
that just says video.

61

00:04:41,880  -->  00:04:47,870
And then at the bottom you'll export default video list item.

62

00:04:47,970  -->  00:04:48,790
Cool.

63

00:04:48,840  -->  00:04:55,470
So now each video list item which is intended to show a single video you know a thumbnail and a title

64

00:04:56,070  -->  00:05:01,750
for right now is just going to show a single lie that says video.

65

00:05:02,070  -->  00:05:05,990
Now back over and video list we can start putting our list together.

66

00:05:06,630  -->  00:05:18,030
So appear at the top we can say prop's videos map and to do this and all that more concise term.

67

00:05:18,030  -->  00:05:23,040
We're going to use an arrow function rather than the function that we used over here in the console

68

00:05:23,050  -->  00:05:24,590
.

69

00:05:24,600  -->  00:05:32,970
So for each element of videos will have a function that gets called with a single video and it will

70

00:05:32,970  -->  00:05:41,270
define our arrow function and will return a video list item and we'll pass it.

71

00:05:41,400  -->  00:05:44,890
The video as a property named video.

72

00:05:45,790  -->  00:05:50,500
OK let's see we need to do is save an actual reference to this array that gets returned.

73

00:05:50,580  -->  00:05:59,220
So say Konst video items equals the result of this mapping function.

74

00:05:59,220  -->  00:06:02,010
Finally we'll add it as GSX.

75

00:06:02,040  -->  00:06:09,700
Since we're referencing a javascript variable we'll use curly braces and will say video items.

76

00:06:10,350  -->  00:06:11,380
OK.

77

00:06:12,330  -->  00:06:18,590
So a quick note here re-act is very intelligent intelligent about rendering arrays of items.

78

00:06:18,600  -->  00:06:23,230
Notice that you know I've got an array here it's return another array.

79

00:06:23,430  -->  00:06:26,620
We do know that it's an array of components but it is an array.

80

00:06:26,640  -->  00:06:27,550
Right.

81

00:06:27,930  -->  00:06:33,720
So this variable right here is going to end up as an array that we're passing to react totally ok.

82

00:06:33,750  -->  00:06:37,520
Re-act is going to recognize that it's a list or an array of components.

83

00:06:37,530  -->  00:06:41,720
And it's going to try to render all the lies in the here inside of the UL.

84

00:06:42,000  -->  00:06:44,280
So let's go ahead and give this a shot.

85

00:06:44,430  -->  00:06:48,290
I'm going to flip back over to Chrome.

86

00:06:48,870  -->  00:06:53,100
Let's refresh and we get video video video video.

87

00:06:53,130  -->  00:06:55,090
Five times one for each video.

88

00:06:55,230  -->  00:06:58,100
Awesome looking at the console.

89

00:06:58,110  -->  00:07:01,800
However we do have a big wall it's a warning but it is red.

90

00:07:01,800  -->  00:07:03,770
So I guess you kind of say it's an Air.

91

00:07:03,990  -->  00:07:06,090
Let's discuss this whirring in the next section.