So let's start without putting this as an actual list.
If we have a look, we get three elements in this person's array on our state.
Now again in other frameworks which you might know, if you don't, that's no problem,
it's different here anyways.
In other frameworks like in Vue, you would have a directive v-for or in Angular ngFor. Now in react
you don't have that because guess what?
Everything is javascript here as you learned.
Just as with conditional content which we handle here with normal javascript, we also handle lists with
the default tools
javascript gives us for working with lists.
How would this look like
in our case here where we have the persons? Well we would again use single curly braces to render something
dynamic within our jsx code
and then we want to render our persons array in the state so this.state.persons simply referring to
this array.
Now this alone won't do the trick
that's an array of javascript object, not something we can convert to html,
not something react would understand here.
So we need to convert this array of javascript which is not valid
jsx
to valid jsx. And javascript, vanilla javascript offers us a function to convert arrays,
it's the map function. Map simply maps every element in a given array such as our persons array here
into something else.
It does this by executing a method on every element in a given array
So on this array in this case. This method or this function is passed to the map method here,
It takes the element of the array as input,
so a single person, the name of this argument is totally up to you.
I'm just writing an anonymous function here and I'm actually writing an arrow function here.
So this is an ES6 arrow function which I pass to the map method, it might look strange but is actually
vanilla javascript, ES6 but javascript, not jsx, nothing like that,
that's why it's inside of single curly braces.
So this function here which I pass as an anonymous function to the map method is executed on every element
in the persons array and javascript automatically gives us each element as an input to that function
which we execute on every element.
So in this case it's our person,
again you can name whatever you want but since it is an array of persons, person probably makes sense.
And now you have to return something,
you should return what you want to map this item into.
So we have an array of javascript objects and persons,
here, one object
two objects, three objects and we want to convert this into something else.
The map method which we're using here conveniently simply returns a new array
and since I just print this new array like this inside jsx, react will basically just try to take the
individual elements of this new array and render them to the dom
if they are valid jsx.
So our goal simply is to return jsx here so that every element of the person's array gets mapped
into a jsx representative of it.
So here I want to map it into a person component in the end because each person javascript object can
be represented as a person component in my project here. And then we simply assign a name again
and here we can use the person we get as an input.
So the individual element for which this function is executed and there we got the name property, and the
same of course for the age, where it can now add this person age. I'll split this over multiple lines to make it easier
to read
and that actually is it.
With that, I can get rid of all the other persons and I will remove them for now simply
and now what this will lead to is that it will still print a list of persons, clicking on them and changing
the name won't work for now because I removed the handlers, we'll add them soon,
and it simply does this by mapping this javascript array into still a javascript array but an array
with jsx objects inside of it which react will automatically pull out and render to the screen.
Let's save the file and see the result, if I toggle my persons here we see all the persons.
We also get a new warning besides the one we already know that we should assign a key property,
now I will definitely come back to that,
that's super important.
We can already see though that basically it is working,
it is rendering this list of elements by mapping our array into something else.
Now let's dive deeper into this list thing and learn what's up with that key and how we may react to
changes to our array and how we may change it by using our event listeners.