All language subtitles for 020 Outputting Lists of Data_en

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.