Loading lesson path
method creates a new array with the results of calling a function for every array element.
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(x => x * 2);
map() in Reactmethod is commonly used in React to render lists of elements:
const fruitlist = ['apple', 'banana', 'cherry'];function MyList() {
return (<ul>
{fruitlist.map(fruit =>
<li key={fruit}>{fruit}</li>
)}</ul>
);
}in React to create list items, each item needs a unique key prop. map() with Objects
with arrays of objects:
const users = [
{ id: 1, name: 'John', age: 30 },
{ id: 2, name: 'Jane', age: 25 },
{ id: 3, name: 'Bob', age: 35 }
];function UserList() {
return (<ul>
{users.map(user =>
<li key={user.id}>
{user.name} is {user.age} years old</li>
)}</ul>
);
}
map() Parametersmethod takes three parameters: currentValue - The current element being processed index - The index of the current element (optional) array - The array that map was called upon (optional)
const fruitlist = ['apple', 'banana', 'cherry'];function App() {
return (<ul>
{fruitlist.map((fruit, index, array) => {
return (
<li key={fruit}>Name: {fruit}, Index: {index}, Array: {array} </li>
);
})}</ul>
);
}method always returns a new array. It does not modify the original array.