Intro

Over the last lessons we learn how to output content conditionally and hat we simply take advantage of the fact.
Now I want to render my list of persons thus far we are not dynamically doing this. As we have a couple of persons there in our state and that should be our single source of truth. this should be our data source. In a bigger application or real application, this might be populated from data or with data you fetch from the server.

So as we got an array of persons, but in the JSX we return we simply hardcoded three persons and manually assigned data to the different person and our array and this of course super inflexible if we ever change something if we add a new person or remove one that will basically break and we can’t even address a specific person when updating it as we have done with the click or changeHandler. This all is not working in the way it should work.
So let’s learn how we can outpour lists of data, arrays basically, and how we can also then interact with them and correctly change arrays in our state.

Outputting Lists

So let’s start without putting this as an actual list if we have a look we get three elements in the persons array on our state.

just as with conditional content we handly here with normal javascript. we also handle lists with the default tools javascript gives us for working with lists.

using Array.map()

in the map() dunction it simply maps every element in a given array such as our persons array into something else.
It does this by executing a method on every element in a given array.

...
let persons = null;
if (this.state.showPersons) {
	persons = (
		<div>
			{this.state.persons.map(person => {
				return (' -- JSX CODE -- ');
			})}
			{/* <Person name={this.state.persons[0].name} age={this.state.persons[0].age} />
			<Person
				click={this.switchNameHandler}
				name={this.state.persons[1].name}
				age={this.state.persons[1].age}
				changed={this.nameChangedHandler}
			/>
			<Person name={this.state.persons[2].name} age={this.state.persons[2].age} /> */}
		</div>
	);
}
...

.map(person => {}) will take the element of array as the input. So as a single person the name of the argument is totally upto you.
We are using arrow function inside the .map() the method is an ES6 arrow function which I pass to the map method might look strange but is vanilla ES6 but javascript, not JSX nothing like that. that’s why its inside the single curly braces { .map( ... => {...} ) }.
so that function there which I pass as an anonymous function to the map method is executed on every element in the person array and javascript automatically gives us each element as an input to that function which we execute on every element.
So inside the anonymous function, you have to return something, you should return what you want to map the item into.
As we have an Array<object> in state.persons and we want to connvert that each object into something else. The map method will return an new array so will pass our JSX code to return an array of Person component to render on page.

...
if (this.state.showPersons) {
	persons = (
		<div>
			{this.state.persons.map(person => {
				return <Person name={person.name} age={person.age} />;
			})}
			{/*
				<Person name={this.state.persons[0].name} age={this.state.persons[0].age} />
				...
			*/}
		</div>
	);
}
...

After running the application you after click the button you will see a new error

I’ll definitely come back to that, that’s super important we can already see through that it is working, it is rendering the list of elements by mapping our array into something else.

Now let’s dive deeper into this (the 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.

React introduction
React Component