ES6 Array map()

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.