render() {
return (
// using a arrow function get the looping item and it's index (i)
this.state.data.map((item, i) => {
Test
})
);
}
Step 1
function Items()
words = ["Hello", "World", "How are you?"]
return (
{words.map(item => - {item}
)}
)
}
Step 2 – more data
const turtles = [
{
name: "Leonardo",
nickName: "Leo",
weapon: "Katana",
imgUrl: "https://upload.wikimedia.org/wikipedia/en/e/ed/Leonardo_%28Teenage_Mutant_Ninja_Turtles%29.jpg"
}
]
return (
{turtles.map(turtle =>
{turtle.name} ({turtle.nickName})
Weapon of choice: {turtle.weapon}
)}
)
Step 3 – adding a key
The only changes made here are parentheses around the arrow function’s parameters (since I added a second one, parentheses are now required), the new index parameter in the function, and the key property to the root element I’m returning inside the .map().
return (
{turtles.map(turtle, index) =>
{turtle.name} ({turtle.nickName})
Weapon of choice: {turtle.weapon}
)}
)
Step 4 – cleanup and save to variable
For a cleaner look, you can save the mapped array to a variable and just insert the variable like this.
const displayTurtles = {turtles.map(turtle, index) =>
{turtle.name} ({turtle.nickName})
Weapon of choice: {turtle.weapon}
}
return (
{displayTurtles}
)
}
Nested Array
https://bobbyhadz.com/blog/react-map-nested-array
Render nested array using map() in React #
To render a nested array using map():
- Use the
map()method to iterate over the outer array. - On each iteration, call the
map()method on the nested array. - Render the elements of the nested array.
App.js
export default function App() {
const people = [
{id: 1, name: 'Alice', pets: ['dog', 'cat']},
{id: 2, name: 'Bob', pets: ['turtle', 'rabbit']},
{id: 3, name: 'Carl', pets: ['hamster', 'parrot']},
];
return (
<div>
{people.map((person, index) => {
return (
<div key={index}>
<h2>Name: {person.name}</h2>
{person.pets.map((pet, index) => {
return (
<div key={index}>
<h2>Pet: {pet}</h2>
</div>
);
})}
<hr />
</div>
);
})}
</div>
);
}
The function we passed to the Array.map method gets called with each element in the array and the index of the current iteration.
On each iteration, we render the name property of the person object and use a nested map() to iterate over the pets array of each person.
Notice that when calling the map() method inside of our JSX code, we have to use curly braces {} to wrap the call to map().
This is needed only in your JSX code and signals to React that we are writing an expression that has to get evaluated.
We used arrow functions with explicit return statements in both calls to the map() method. If you only need to render some JSX elements and don't use conditions, declare variables, etc, you can use an implicit return, which would make your code a little more readable.
App.js
export default function App() {
const people = [
{id: 1, name: 'Alice', pets: ['dog', 'cat']},
{id: 2, name: 'Bob', pets: ['turtle', 'rabbit']},
{id: 3, name: 'Carl', pets: ['hamster', 'parrot']},
];
return (
<div>
{people.map((person, index) => (
<div key={index}>
<h2>Name: {person.name}</h2>
{person.pets.map((pet, index) => (
<div key={index}>
<h2>Pet: {pet}</h2>
</div>
))}
<hr />
</div>
))}
</div>
);
}
We used implicit returns for both of the arrow functions we passed to the map() method.
App.js
const arr = ['a', 'b', 'c'];
// ποΈ explicit return
const result1 = arr.map(element => {
return element;
});
// ποΈ implicit return
const result2 = arr.map(element => element);
You can only use implicit returns when you don't have to use conditionals or define variables in the function you pass to map().
We used the index for the key prop in the examples, however it's better to use a stable unique identifier if you have one. We could have used the id property on each object.
The key prop is used internally by React for performance reasons. It helps the library make sure to only re-render the array elements that have changed.
Having said that, you won't see any noticeable difference unless you're dealing with many thousands of array elements.