How to Render a List Using map() in React

<Conditional RenderingComponents>

At the end of the previous lesson, we were able to conditionally render a user and the corresponding status, represented using a green check mark. This brings us to our next question, what if there are more than one user?

For example, here is an array of objects containing information of different users and their corresponding email addresses and status:

javascript
1const users = [
2  { id: 1, name: "Alice", email: "alice@example.com", isActive: true },
3  { id: 2, name: "Bob", email: "bob@example.com", isActive: true },
4  { id: 3, name: "Charlie", email: "charlie@example.com", isActive: false },
5  { id: 4, name: "Diana", email: "diana@example.com", isActive: false },
6];

How would you display this information using React and JSX?

Using map()

The first thing you could do is using the map() method. Recall that map() is one of the built-in JavaScript methods used to perform actions on every element in an array, and then return the result in an new array.

In this case, we can transform this users array into an array of JSX element, which can then be rendered by React.

jsx
1function App() {
2  const users = [
3    { id: 1, name: "Alice", email: "alice@example.com", isActive: true },
4    { id: 2, name: "Bob", email: "bob@example.com", isActive: true },
5    { id: 3, name: "Charlie", email: "charlie@example.com", isActive: false },
6    { id: 4, name: "Diana", email: "diana@example.com", isActive: false },
7  ];
8
9  return (
10    <ul>
11      {users.map((user) => (
12        <li key={user.id}>
13          {user.name} - {user.email} {user.isActive && "✅"}
14        </li>
15      ))}
16    </ul>
17  );
18}
19
20export default App;

React render list

Adding filters

Since we are just using native JavaScript array methods here, naturally, you can apply other methods as well. For example, you can use the filter() method to selectively render users that fit certain criteria.

jsx
1function App() {
2  const users = [
3    { id: 1, name: "Alice", email: "alice@example.com", isActive: true },
4    { id: 2, name: "Bob", email: "bob@example.com", isActive: true },
5    { id: 3, name: "Charlie", email: "charlie@example.com", isActive: false },
6    { id: 4, name: "Diana", email: "diana@example.com", isActive: false },
7  ];
8
9  const filteredUsers = users.filter((user) => user.isActive === true);
10
11  return (
12    <ul>
13      {filteredUsers.map((user) => (
14        <li key={user.id}>
15          {user.name} - {user.email} {user.isActive && "✅"}
16        </li>
17      ))}
18    </ul>
19  );
20}
21
22export default App;

In this example, only users that are active will be listed.

React filter list

Don't forget the keys

You may have noticed that we specified a key attribute when rendering the list.

jsx
1<ul>
2  {filteredUsers.map((user) => (
3    <li key={user.id}>
4      {user.name} - {user.email} - {user.status}
5    </li>
6  ))}
7</ul>

The key tells React which array item this element corresponds to. This is important when the list is meant to be dynamic. For example, in future lessons, we are going to demonstrate how the list can be sorted, inserted, or deleted, and React will need this key to match with the item in the array when the DOM tree changes.

You should remember that the key should be unique and must not change, meaning they should not regenerate during rendering, or that defeats their original purpose.

In most cases, the key should come from the database, such as the uer.id in our example, which is unique by default. If you have to generate the keys locally, use unique ID generators such as crypto.randomUUID() or uuid.

<Conditional RenderingComponents>