Now that we added our styling
in our navigation bar let's work on the pages.
Let's maybe start with the "All meetups" page
and let's output a list of dummy meetups for the moment
before we then make sure that we can add our own meetups.
And for this I'll go to the all meetups js file.
And the goal in there is to get a list of meetups later
we will get it from a server by sending a HTTP request
for the moment we'll work with some dummy meetups.
And I then went to output those meetups.
Now for this I'll, first of all
add a constant name, dummy data, which we'll replace later
which holds an array of dummy meetups.
Now here I'll just add a bunch of JavaScript objects
which hold the meetup data, things like the image
the title, the description text and the address maybe.
And for this you can definitely also use
my code attachments there
you'll find some prepared, dummy data.
You can also prepare it your own one.
Here I just have two dummy objects
which have basically the same content, just different id's
and different titles, but the same image, the same address
the same description text, because of course it's not
about the dummy data, but about what we do with it.
Now, one word about that image.
I got that from Wikipedia.
You can of course bring your own images.
Here I got this nice looking image here created
by Thomas Wolf and not by me.
So just to give him, due credits.
And you can of course bring your own image.
Just make sure that you simply get a URL
to some image and store that in this image
property of your dummy data points.
Now we got the dummy data,
now the goal is to output that data.
So for this here in this div or section
which we could also use, we can add an h1 tag let's say
and say "all meetups" then below that we want to
output this data, but of course not as code like this
but instead as JSX elements.
And for this we now need to learn how we can render a list
of JSX elements, dynamically, how we can translate a list
of data into a list of JSX elements.
Because it is worth noting that in JSX,
you can actually render an array JSX elements like this.
So output a dynamic expression with curly braces
then add an array.
And in there you could have list items like item one
and then as a second item, item two.
And if you do that, those are rendered.
So arrays are rendered correctly, automatically by React.
And that's important to know, because that means
that if we can translate this array of objects
into an array of JSX elements, we can output it down there.
And there is a way for translating
an array into an array of different data in JavaScript.
On that dummy data array, we can call the built in
map method, which exists in JavaScript.
And map allows us to execute a function,
here I'm writing an arrow function on every element
in that array, and it will get this element as a input.
So in this case the meetup let's say as a input,
automatically because this function is called
"Automatically by JavaScript"
and we then return the transformed data.
And the result of calling map then is a new array full
of that transformed data.
And here we could say for every meetup object
which we're getting, we want to return a list item.
And hence we may be actually wrapped
as all here with an unordered list.
And in that list item
we want to output data about that meetup,
for example to begin with, to output the title.
So here I'm dynamically outputting meetup title
in this JSX code.
So with that, we transform our array
of objects into an array of li elements.
And if we do that, just like this, and we reload
we see this is a first and this is a second meetup.
So that does work.
Now, there is one important note about lists, though
if you open the developer tools, you'll see a warning here
that each child in a list should have a unique "key" prop.
That is a requirement by React,
which it needs to update and render lists efficiently.
I dive deeper into that in my React course,
for the moment it's enough to know
that we should add the "key" prop here to the list item
and then set this to some unique value per item.
And we have a unique value for every list item here
the IDs, the IDs are different for every item.
So here we can then set this to meetup.id
and with that we'll no longer get that warning if we reload.
So that is how we can render a list
of data simply by mapping it.
And that is how you typically do render lists
of data with React.
But in the end, you can just render any array
of JSX elements, no matter how you derived that array.