JavaScript Array map()
The map() Method
The map() method creates a new array with the results of calling a function for every array element.
Example
Multiply each number by 2:
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(x => x * 2);
map() in React
The map() method is commonly used in React to render lists of elements:
Example
const fruitlist = ['apple', 'banana', 'cherry'];
function MyList() {
return (
<ul>
{fruitlist.map(fruit =>
<li key={fruit}>{fruit}</li>
)}
</ul>
);
}
Note: When using map() in React to create list items, each item needs a unique key prop.
map() with Objects
You can also use map() with arrays of objects:
Example
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() Parameters
The map() method takes three parameters:
currentValue- The current element being processedindex- The index of the current element (optional)array- The array that map was called upon (optional)
Example
const fruitlist = ['apple', 'banana', 'cherry'];
function App() {
return (
<ul>
{fruitlist.map((fruit, index, array) => {
return (
<li key={fruit}>
Number: {fruit}, Index: {index}, Array: {array}
</li>
);
})}
</ul>
);
}Note: The map() method always returns a new array. It does not modify the original array.
