Map is one of the most popular and widely used functions when working with React. It has two prominent use cases. It’s quite similar to how the filter() works. The first one is to modify the state of the application and the other to render a list of elements efficiently. Let’s start with the previous one first.

Modifying the state of the app

In the following example, we will see how to manipulate arrays of data with map() efficiently. The result of calling map() on an array is a NEW array. Every element of this array is processed by the callback function provided to the map itself.

const fibonacciNumbers = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
const doubledFibonacciNumbers = fibonacciNumbers.map(number => number * 2)
// [0, 2, 2, 4, 6, 10, 16, 26, 42, 68]

In the above examples, we have an array holding the first 9 numbers of the Fibonacci sequence. We have called the map() method on the fibonacciNumbers variable. The callback function provided to the method that takes each element of the array multiplies it by 2 and writes it out to the new array. We captured the new array in the doubledFibonacciNumbers variable.

Let’s take a look at another example. This time we’re gonna work on something a little bit complicated. We’re gonna make use of the destructuring assignment to help us map over a list of objects and extract some meaningful data from them.

const users = [
  {
    name: "Jesse",
    age: 21,
    height: "1.90cm"
  },
  {
    name: "Tom",
    age: 25,
    height: "1.67cm"
  },
  {
    name: "Anna",
    age: 34,
    height: "1.59cm"
  }
]

const userNames = users.map(({ name }) => name)
// ['Jesse', 'Tom', 'Anna']

As you can see we have an array users. Each user is represented by an object. Each object has 3 properties, those are: name, age and height. The goal here is to get an array of of users’ names and store it as an array.

The simplest way to carry out this operation is by using the map function. We’re calling map on the array users, using the destructuring assignment to reach into each of the user objects and select the name of that particular user. The callback functions returns the name, which gets written into the new array. And just like that we have an array of users’ names ready to use.

Render lists in JSX

Expanding on the previous example we want to render the names of the users to the screen. We can use map to help us accomplish just that.

const userNames = ['Jesse', 'Tom', 'Anna']
function App() {

  const renderListOfUserNames = (names) => {
    return names.map(name => <li>{name}</li>)
  }

  return (
    <div>
      <ul>
        {renderListOfUserNames(userNames)}
      </ul>
    </div>
  );
}

export default App;

We have created the renderListOfUserNames function that maps over the provided array argument names and maps each name into HTML <li> tag. We are calling this function in the JSX and the result gets rendered to the page. 

And below the rendered output

This is a simple example, but it illustrates the point quite well. Think about the case where you had to render 100 user names on the screen. All of this can be accomplished with just few lines of code.

But before we move forward there is one things that you must be aware of. Our application has a silent bug, which although pretty harmless right now, can cause some troubles down the line. In the console we can see the below warning.

When rendering multiple sibling elements to the DOM, each of those elements needs to have a unique “key” property provided. Ignoring this warning can lead to some unwanted behaviour in the future. Let’s fix that warning.

const userNames = ['Jesse', 'Tom', 'Anna']
function App() {

  const renderListOfUserNames = (names) => {
    return names.map(name => <li>{name}</li>)
  }

  return (
    <div>
      <ul>
        {renderListOfUserNames(userNames)}
      </ul>
    </div>
  );
}

export default App;

In our case, each of the names present in userNames is unique, hence we can use those as our key. Now after you refresh the page you can see that the error is gone.

It’s worth pointing out that we don’t need to use the function to render the users’ names. We can map over those directly in the JSX. You can see how it’s done in the below example.

const userNames = ['Jesse', 'Tom', 'Anna']
function App() {

  return (
    <div>
      <ul>
        {userNames.map(name => <li>{name}</li>)}
      </ul>
    </div>
  );
}

export default App;

Feel free to play around with mapping yourself. It’s a tool that every React developer should be confident with.

👋 Hey, I'm Dawid Budaszewski

Hello! I'm Dawid. I'm a full-stack developer with a couple of years of experience under my belt. I spent most of my career working with React. I also built reacterry.com, an online portal with React coding challenges.