1
00:00:02,000 --> 00:00:04,000
Now that we added our styling

2
00:00:04,000 --> 00:00:07,000
in our navigation bar let's work on the pages.

3
00:00:07,000 --> 00:00:10,000
Let's maybe start with the "All meetups" page

4
00:00:10,000 --> 00:00:15,000
and let's output a list of dummy meetups for the moment

5
00:00:15,000 --> 00:00:19,000
before we then make sure that we can add our own meetups.

6
00:00:20,000 --> 00:00:23,000
And for this I'll go to the all meetups js file.

7
00:00:23,000 --> 00:00:28,000
And the goal in there is to get a list of meetups later

8
00:00:29,000 --> 00:00:33,000
we will get it from a server by sending a HTTP request

9
00:00:33,000 --> 00:00:37,000
for the moment we'll work with some dummy meetups.

10
00:00:37,000 --> 00:00:40,000
And I then went to output those meetups.

11
00:00:40,000 --> 00:00:41,000
Now for this I'll, first of all

12
00:00:41,000 --> 00:00:46,000
add a constant name, dummy data, which we'll replace later

13
00:00:46,000 --> 00:00:48,000
which holds an array of dummy meetups.

14
00:00:49,000 --> 00:00:52,000
Now here I'll just add a bunch of JavaScript objects

15
00:00:52,000 --> 00:00:55,000
which hold the meetup data, things like the image

16
00:00:55,000 --> 00:00:59,000
the title, the description text and the address maybe.

17
00:00:59,000 --> 00:01:02,000
And for this you can definitely also use

18
00:01:02,000 --> 00:01:04,000
my code attachments there

19
00:01:04,000 --> 00:01:06,000
you'll find some prepared, dummy data.

20
00:01:06,000 --> 00:01:09,000
You can also prepare it your own one.

21
00:01:09,000 --> 00:01:11,000
Here I just have two dummy objects

22
00:01:11,000 --> 00:01:15,000
which have basically the same content, just different id's

23
00:01:15,000 --> 00:01:19,000
and different titles, but the same image, the same address

24
00:01:19,000 --> 00:01:22,000
the same description text, because of course it's not

25
00:01:22,000 --> 00:01:25,000
about the dummy data, but about what we do with it.

26
00:01:25,000 --> 00:01:28,000
Now, one word about that image.

27
00:01:28,000 --> 00:01:30,000
I got that from Wikipedia.

28
00:01:30,000 --> 00:01:32,000
You can of course bring your own images.

29
00:01:32,000 --> 00:01:36,000
Here I got this nice looking image here created

30
00:01:36,000 --> 00:01:39,000
by Thomas Wolf and not by me.

31
00:01:39,000 --> 00:01:42,000
So just to give him, due credits.

32
00:01:42,000 --> 00:01:44,000
And you can of course bring your own image.

33
00:01:44,000 --> 00:01:48,000
Just make sure that you simply get a URL

34
00:01:48,000 --> 00:01:51,000
to some image and store that in this image

35
00:01:51,000 --> 00:01:53,000
property of your dummy data points.

36
00:01:54,000 --> 00:01:56,000
Now we got the dummy data,

37
00:01:56,000 --> 00:01:59,000
now the goal is to output that data.

38
00:01:59,000 --> 00:02:04,000
So for this here in this div or section

39
00:02:04,000 --> 00:02:08,000
which we could also use, we can add an h1 tag let's say

40
00:02:08,000 --> 00:02:12,000
and say "all meetups" then below that we want to

41
00:02:12,000 --> 00:02:17,000
output this data, but of course not as code like this

42
00:02:17,000 --> 00:02:20,000
but instead as JSX elements.

43
00:02:20,000 --> 00:02:24,000
And for this we now need to learn how we can render a list

44
00:02:24,000 --> 00:02:29,000
of JSX elements, dynamically, how we can translate a list

45
00:02:29,000 --> 00:02:32,000
of data into a list of JSX elements.

46
00:02:32,000 --> 00:02:37,000
Because it is worth noting that in JSX,

47
00:02:37,000 --> 00:02:42,000
you can actually render an array JSX elements like this.

48
00:02:42,000 --> 00:02:45,000
So output a dynamic expression with curly braces

49
00:02:45,000 --> 00:02:47,000
then add an array.

50
00:02:47,000 --> 00:02:51,000
And in there you could have list items like item one

51
00:02:51,000 --> 00:02:53,000
and then as a second item, item two.

52
00:02:54,000 --> 00:02:57,000
And if you do that, those are rendered.

53
00:02:57,000 --> 00:03:02,000
So arrays are rendered correctly, automatically by React.

54
00:03:02,000 --> 00:03:05,000
And that's important to know, because that means

55
00:03:05,000 --> 00:03:09,000
that if we can translate this array of objects

56
00:03:09,000 --> 00:03:13,000
into an array of JSX elements, we can output it down there.

57
00:03:13,000 --> 00:03:16,000
And there is a way for translating

58
00:03:16,000 --> 00:03:20,000
an array into an array of different data in JavaScript.

59
00:03:20,000 --> 00:03:23,000
On that dummy data array, we can call the built in

60
00:03:23,000 --> 00:03:27,000
map method, which exists in JavaScript.

61
00:03:27,000 --> 00:03:31,000
And map allows us to execute a function,

62
00:03:31,000 --> 00:03:35,000
here I'm writing an arrow function on every element

63
00:03:35,000 --> 00:03:39,000
in that array, and it will get this element as a input.

64
00:03:39,000 --> 00:03:42,000
So in this case the meetup let's say as a input,

65
00:03:42,000 --> 00:03:45,000
automatically because this function is called

66
00:03:45,000 --> 00:03:47,000
"Automatically by JavaScript"

67
00:03:47,000 --> 00:03:51,000
and we then return the transformed data.

68
00:03:51,000 --> 00:03:55,000
And the result of calling map then is a new array full

69
00:03:55,000 --> 00:03:58,000
of that transformed data.

70
00:03:58,000 --> 00:04:00,000
And here we could say for every meetup object

71
00:04:00,000 --> 00:04:04,000
which we're getting, we want to return a list item.

72
00:04:04,000 --> 00:04:07,000
And hence we may be actually wrapped

73
00:04:07,000 --> 00:04:10,000
as all here with an unordered list.

74
00:04:10,000 --> 00:04:11,000
And in that list item

75
00:04:11,000 --> 00:04:14,000
we want to output data about that meetup,

76
00:04:14,000 --> 00:04:18,000
for example to begin with, to output the title.

77
00:04:18,000 --> 00:04:22,000
So here I'm dynamically outputting meetup title

78
00:04:22,000 --> 00:04:24,000
in this JSX code.

79
00:04:25,000 --> 00:04:27,000
So with that, we transform our array

80
00:04:27,000 --> 00:04:31,000
of objects into an array of li elements.

81
00:04:32,000 --> 00:04:35,000
And if we do that, just like this, and we reload

82
00:04:35,000 --> 00:04:38,000
we see this is a first and this is a second meetup.

83
00:04:38,000 --> 00:04:40,000
So that does work.

84
00:04:42,000 --> 00:04:45,000
Now, there is one important note about lists, though

85
00:04:45,000 --> 00:04:49,000
if you open the developer tools, you'll see a warning here

86
00:04:49,000 --> 00:04:52,000
that each child in a list should have a unique "key" prop.

87
00:04:53,000 --> 00:04:56,000
That is a requirement by React,

88
00:04:56,000 --> 00:05:00,000
which it needs to update and render lists efficiently.

89
00:05:00,000 --> 00:05:03,000
I dive deeper into that in my React course,

90
00:05:03,000 --> 00:05:05,000
for the moment it's enough to know

91
00:05:05,000 --> 00:05:08,000
that we should add the "key" prop here to the list item

92
00:05:08,000 --> 00:05:13,000
and then set this to some unique value per item.

93
00:05:13,000 --> 00:05:16,000
And we have a unique value for every list item here

94
00:05:16,000 --> 00:05:20,000
the IDs, the IDs are different for every item.

95
00:05:20,000 --> 00:05:23,000
So here we can then set this to meetup.id

96
00:05:24,000 --> 00:05:28,000
and with that we'll no longer get that warning if we reload.

97
00:05:29,000 --> 00:05:32,000
So that is how we can render a list

98
00:05:32,000 --> 00:05:34,000
of data simply by mapping it.

99
00:05:34,000 --> 00:05:38,000
And that is how you typically do render lists

100
00:05:38,000 --> 00:05:40,000
of data with React.

101
00:05:40,000 --> 00:05:43,000
But in the end, you can just render any array

102
00:05:43,000 --> 00:05:47,000
of JSX elements, no matter how you derived that array.