1
00:00:00,830 --> 00:00:05,240
In the last section we created our image list component and we're now ready to take this list of images

2
00:00:05,450 --> 00:00:07,340
and show them to the users somehow.

3
00:00:07,340 --> 00:00:12,320
Now before you start to write any code inside this component I want to do a quick review on a kind of

4
00:00:12,320 --> 00:00:17,840
fundamental thing around javascript arrays very quickly if you are already very familiar with mapping

5
00:00:17,900 --> 00:00:22,220
javascript race feel free to pause a video right now and continue in the next video.

6
00:00:22,220 --> 00:00:25,130
Otherwise stick around and we're going to do a very quick review.

7
00:00:25,130 --> 00:00:29,390
All right so we're going to pull up that same little code editor that we used very briefly when we are

8
00:00:29,390 --> 00:00:31,110
talking about context earlier.

9
00:00:31,160 --> 00:00:32,900
Here's a link to it on the screen.

10
00:00:32,900 --> 00:00:36,040
So my full name get Hublot IO slash playgrounds.

11
00:00:36,050 --> 00:00:36,680
Remember no.

12
00:00:36,690 --> 00:00:40,500
And in my last name everyone always puts an end in there.

13
00:00:40,770 --> 00:00:40,980
OK.

14
00:00:41,000 --> 00:00:45,080
So a quick reminder here in this little code editor we can create a variable.

15
00:00:45,080 --> 00:00:49,750
Like I don't know I number modern or whatever make it 10.

16
00:00:50,110 --> 00:00:54,700
And then if we start to reference that number or do operations on it we're going to print out the results

17
00:00:54,760 --> 00:00:57,550
over here and it's all live updating.

18
00:00:57,550 --> 00:01:02,770
So let's create a little array in here and I want to remind you on how to write a map statement with

19
00:01:02,770 --> 00:01:08,170
javascript because understanding map statements is absolutely key to building lists of components with

20
00:01:08,170 --> 00:01:09,010
react.

21
00:01:09,310 --> 00:01:17,740
So I'm going to put together an array of numbers and I'll put in 0 1 2 3 4 like so that'll work for

22
00:01:17,740 --> 00:01:18,190
now.

23
00:01:19,270 --> 00:01:23,240
All right so now I want to somehow produce a brand new array.

24
00:01:23,360 --> 00:01:29,860
And in this new array I went to multiply every one of these values by 10 but really take note of that

25
00:01:29,860 --> 00:01:31,360
statement or how I laid out that problem.

26
00:01:31,360 --> 00:01:33,160
I want to create a new array.

27
00:01:33,160 --> 00:01:37,690
I don't want to loop this through this array and change all the numbers in here.

28
00:01:37,720 --> 00:01:40,090
I want to create a brand new one.

29
00:01:40,150 --> 00:01:43,560
So let's try doing that first by writing out a simple for loop.

30
00:01:43,690 --> 00:01:48,450
I'm going to declare a empty array first then I'll call new numbers.

31
00:01:49,700 --> 00:01:52,530
And then I'll write out a for loop use.

32
00:01:52,560 --> 00:02:00,490
Let all the way through a loop as long as ISIS then numbers some length and I'll go as long as I plus

33
00:02:00,520 --> 00:02:05,770
plus And then inside of here all say new numbers.

34
00:02:05,800 --> 00:02:08,760
Push all take numbers at I.

35
00:02:08,940 --> 00:02:12,190
And I'm going to multiply that by 10 like so.

36
00:02:12,190 --> 00:02:19,070
And then after the for loop I'm going to reference new numbers and I'll see that I have all those original

37
00:02:19,070 --> 00:02:20,700
values multiplied by 10.

38
00:02:20,930 --> 00:02:26,510
And in addition I can print out the original numbers and the original numbers array has not been changed

39
00:02:26,510 --> 00:02:27,690
in any way.

40
00:02:27,710 --> 00:02:32,810
So essentially when I ran the for loop right here I did not mutate or change the existing array.

41
00:02:32,810 --> 00:02:37,580
I just did some calculation and stuck each of those different numbers to those updated numbers into

42
00:02:37,580 --> 00:02:39,540
this brand new array.

43
00:02:39,560 --> 00:02:45,110
Now a map statement in javascript is going to do the exact same thing as what you are doing right here.

44
00:02:45,500 --> 00:02:49,280
A mapping statement is going to iterate over an array.

45
00:02:49,460 --> 00:02:56,450
It's going to return a brand new array the brand new array is going to take each of the original values

46
00:02:56,600 --> 00:02:58,750
and modify them in some fashion.

47
00:02:58,910 --> 00:02:59,360
That's it.

48
00:02:59,360 --> 00:03:05,750
Same thing as exactly what you see right here just with some very condensed syntax so to show you how

49
00:03:05,750 --> 00:03:06,650
this works.

50
00:03:06,710 --> 00:03:09,490
I'm going to clean up those two variables down there.

51
00:03:10,550 --> 00:03:13,330
And now we'll do a numbers map like so.

52
00:03:13,330 --> 00:03:15,430
So here's the mapping function.

53
00:03:15,430 --> 00:03:16,390
This is a function.

54
00:03:16,420 --> 00:03:18,440
We pass a function to it.

55
00:03:18,460 --> 00:03:25,390
You can either pass it a function keyword or we can do a arrow function like so totally up to you.

56
00:03:25,630 --> 00:03:31,570
Now this inner function right here is going to be called with each element in the original array.

57
00:03:31,570 --> 00:03:34,970
We receive each of those elements as an argument inside of here.

58
00:03:35,020 --> 00:03:38,030
We can use any name for this argument that you want to use.

59
00:03:38,140 --> 00:03:42,430
I personally use the singular form of whatever I'm calling that array so if this thing right here is

60
00:03:42,430 --> 00:03:46,160
called numbers I might call the argument here is simply a number.

61
00:03:46,180 --> 00:03:50,950
Now unfortunately javascript number is a keyword so I can't use that word in this case so I'll just

62
00:03:50,950 --> 00:03:58,800
call it like no short for number so then inside of here I'm going to do some calculation on this value

63
00:03:59,010 --> 00:04:01,460
and then return it from this inner function.

64
00:04:01,710 --> 00:04:09,270
So I will say Nahm times 10 like so and then you'll see over here I've got the same array that we got

65
00:04:09,360 --> 00:04:12,630
when we did that really long for a loop right there.

66
00:04:13,110 --> 00:04:19,460
And if I print out numbers underneath it all see that it did not change the original array I just created

67
00:04:19,490 --> 00:04:21,990
a brand new one.

68
00:04:22,030 --> 00:04:27,130
Now this is pretty compact right here compared to writing out a for loop and having to define an array

69
00:04:27,130 --> 00:04:28,060
ahead of time.

70
00:04:28,060 --> 00:04:33,850
We could simplify it even further by removing the return keyword and then removing both those curly

71
00:04:33,850 --> 00:04:39,650
braces and the semi-colon and now right here with just that statement we've got the same thing as before.

72
00:04:39,760 --> 00:04:44,580
And you what we can actually go even further I removing those parentheses around the argument.

73
00:04:44,970 --> 00:04:45,250
OK.

74
00:04:45,280 --> 00:04:46,850
That's map statements right there.

75
00:04:46,960 --> 00:04:50,980
Like I said You're really got to understand these map statements to understand how we're going to build

76
00:04:51,010 --> 00:04:56,800
a list with Riak components is as you might imagine all we're going to do here is loop over all the

77
00:04:56,800 --> 00:04:58,070
images in that array.

78
00:04:58,300 --> 00:05:02,130
And for each image in there we're going to return a brand new component.

79
00:05:02,380 --> 00:05:05,510
Let's do a very quick example of that back over here.

80
00:05:05,950 --> 00:05:12,700
So I'm going to delete all that stuff and then inside of here I'll do another numbers.

81
00:05:12,750 --> 00:05:22,020
Map and I'll say for each number or not in this case I'm going to return a div and inside that div I'm

82
00:05:22,020 --> 00:05:24,730
going to reference Namma like so.

83
00:05:25,710 --> 00:05:28,270
So that's pretty much exactly what it's going to look like.

84
00:05:28,270 --> 00:05:28,470
All right.

85
00:05:28,480 --> 00:05:29,610
So let's take a quick pause right here.

86
00:05:29,620 --> 00:05:34,000
When we come back the next section we're going to map over our list of images rather than these numbers

87
00:05:34,000 --> 00:05:38,590
that you see right here and it will make sure that we return that list of images from the image list

88
00:05:38,590 --> 00:05:39,170
component.