The map() Method
The map() method creates a new array with the results of calling a function for every array element.
Example
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 processed
- index - 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}> Name: {fruit}, Index: {index}, Array: {array}
</li> );
})}
</ul> );
}Note
The map() method always returns a new array. It does not modify the original array.