Skip to content

Rendering Lists 🚧

Overview

You will often want to display multiple similar components from a collection of data. You can use the JavaScript array methods to manipulate an array of data. On this page, you'll use filter() and map() with React to filter and transform your array of data into an array of components.

You will learn

  • How to render components from an array using JavaScript's map()
  • How to render only specific components using JavaScript's filter()
  • When and why to use React keys

Rendering data from arrays

Say that you have a list of content.

1
2
3
4
5
6
7
<ul>
    <li>Creola Katherine Johnson: mathematician</li>
    <li>Mario José Molina-Pasquel Henríquez: chemist</li>
    <li>Mohammad Abdus Salam: physicist</li>
    <li>Percy Lavon Julian: chemist</li>
    <li>Subrahmanyan Chandrasekhar: astrophysicist</li>
</ul>

The only difference among those list items is their contents, their data. You will often need to show several instances of the same component using different data when building interfaces: from lists of comments to galleries of profile images. In these situations, you can store that data in JavaScript objects and arrays and use methods like map() and filter() to render lists of components from them.

Here’s a short example of how to generate a list of items from an array:

  1. Move the data into an array:
1
2
3
4
5
6
7
const people = [
    "Creola Katherine Johnson: mathematician",
    "Mario José Molina-Pasquel Henríquez: chemist",
    "Mohammad Abdus Salam: physicist",
    "Percy Lavon Julian: chemist",
    "Subrahmanyan Chandrasekhar: astrophysicist",
];
  1. Map the people members into a new array of JSX nodes, listItems:
1
const listItems = people.map((person) => <li>{person}</li>);
  1. Return listItems from your component wrapped in a <ul>:
1
return <ul>{listItems}</ul>;

Here is the result:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const people = [
    "Creola Katherine Johnson: mathematician",
    "Mario José Molina-Pasquel Henríquez: chemist",
    "Mohammad Abdus Salam: physicist",
    "Percy Lavon Julian: chemist",
    "Subrahmanyan Chandrasekhar: astrophysicist",
];

export default function List() {
    const listItems = people.map((person) => <li>{person}</li>);
    return <ul>{listItems}</ul>;
}

1
2
3
li {
    margin-bottom: 10px;
}

Notice the sandbox above displays a console error:

Warning: Each child in a list should have a unique "key" prop.

You'll learn how to fix this error later on this page. Before we get to that, let's add some structure to your data.

Filtering arrays of items

This data can be structured even more.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const people = [
    {
        id: 0,
        name: "Creola Katherine Johnson",
        profession: "mathematician",
    },
    {
        id: 1,
        name: "Mario José Molina-Pasquel Henríquez",
        profession: "chemist",
    },
    {
        id: 2,
        name: "Mohammad Abdus Salam",
        profession: "physicist",
    },
    {
        name: "Percy Lavon Julian",
        profession: "chemist",
    },
    {
        name: "Subrahmanyan Chandrasekhar",
        profession: "astrophysicist",
    },
];

Let's say you want a way to only show people whose profession is 'chemist'. You can use JavaScript's filter() method to return just those people. This method takes an array of items, passes them through a “test” (a function that returns true or false), and returns a new array of only those items that passed the test (returned true).

You only want the items where profession is 'chemist'. The "test" function for this looks like (person) => person.profession === 'chemist'. Here's how to put it together:

  1. Create a new array of just “chemist” people, chemists, by calling filter() on the people filtering by person.profession === 'chemist':
1
const chemists = people.filter((person) => person.profession === "chemist");
  1. Now map over chemists:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const listItems = chemists.map((person) => (
    <li>
        <img src={getImageUrl(person)} alt={person.name} />
        <p>
            <b>{person.name}:</b>
            {" " + person.profession + " "}
            known for {person.accomplishment}
        </p>
    </li>
));
  1. Lastly, return the listItems from your component:
1
return <ul>{listItems}</ul>;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { people } from "./data.js";
import { getImageUrl } from "./utils.js";

export default function List() {
    const chemists = people.filter((person) => person.profession === "chemist");
    const listItems = chemists.map((person) => (
        <li>
            <img src={getImageUrl(person)} alt={person.name} />
            <p>
                <b>{person.name}:</b>
                {" " + person.profession + " "}
                known for {person.accomplishment}
            </p>
        </li>
    ));
    return <ul>{listItems}</ul>;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
export const people = [
    {
        id: 0,
        name: "Creola Katherine Johnson",
        profession: "mathematician",
        accomplishment: "spaceflight calculations",
        imageId: "MK3eW3A",
    },
    {
        id: 1,
        name: "Mario José Molina-Pasquel Henríquez",
        profession: "chemist",
        accomplishment: "discovery of Arctic ozone hole",
        imageId: "mynHUSa",
    },
    {
        id: 2,
        name: "Mohammad Abdus Salam",
        profession: "physicist",
        accomplishment: "electromagnetism theory",
        imageId: "bE7W1ji",
    },
    {
        id: 3,
        name: "Percy Lavon Julian",
        profession: "chemist",
        accomplishment:
            "pioneering cortisone drugs, steroids and birth control pills",
        imageId: "IOjWm71",
    },
    {
        id: 4,
        name: "Subrahmanyan Chandrasekhar",
        profession: "astrophysicist",
        accomplishment: "white dwarf star mass calculations",
        imageId: "lrWQx8l",
    },
];

1
2
3
export function getImageUrl(person) {
    return "https://i.imgur.com/" + person.imageId + "s.jpg";
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
ul {
    list-style-type: none;
    padding: 0px 10px;
}
li {
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center;
}
img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

Arrow functions implicitly return the expression right after =>, so you didn't need a return statement:

1
2
3
const listItems = chemists.map(
    (person) => <li>...</li> // Implicit return!
);

However, you must write return explicitly if your => is followed by a { curly brace!

1
2
3
4
const listItems = chemists.map((person) => {
    // Curly brace
    return <li>...</li>;
});

Arrow functions containing => { are said to have a "block body". They let you write more than a single line of code, but you have to write a return statement yourself. If you forget it, nothing gets returned!

Keeping list items in order with key

Notice that all the sandboxes above show an error in the console:

Warning: Each child in a list should have a unique "key" prop.

You need to give each array item a key -- a string or a number that uniquely identifies it among other items in that array:

1
<li key={person.id}>...</li>

JSX elements directly inside a map() call always need keys!

Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree.

Rather than generating keys on the fly, you should include them in your data:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import { people } from "./data.js";
import { getImageUrl } from "./utils.js";

export default function List() {
    const listItems = people.map((person) => (
        <li key={person.id}>
            <img src={getImageUrl(person)} alt={person.name} />
            <p>
                <b>{person.name}</b>
                {" " + person.profession + " "}
                known for {person.accomplishment}
            </p>
        </li>
    ));
    return <ul>{listItems}</ul>;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
export const people = [
    {
        id: 0, // Used in JSX as a key
        name: "Creola Katherine Johnson",
        profession: "mathematician",
        accomplishment: "spaceflight calculations",
        imageId: "MK3eW3A",
    },
    {
        id: 1, // Used in JSX as a key
        name: "Mario José Molina-Pasquel Henríquez",
        profession: "chemist",
        accomplishment: "discovery of Arctic ozone hole",
        imageId: "mynHUSa",
    },
    {
        id: 2, // Used in JSX as a key
        name: "Mohammad Abdus Salam",
        profession: "physicist",
        accomplishment: "electromagnetism theory",
        imageId: "bE7W1ji",
    },
    {
        id: 3, // Used in JSX as a key
        name: "Percy Lavon Julian",
        profession: "chemist",
        accomplishment:
            "pioneering cortisone drugs, steroids and birth control pills",
        imageId: "IOjWm71",
    },
    {
        id: 4, // Used in JSX as a key
        name: "Subrahmanyan Chandrasekhar",
        profession: "astrophysicist",
        accomplishment: "white dwarf star mass calculations",
        imageId: "lrWQx8l",
    },
];

1
2
3
export function getImageUrl(person) {
    return "https://i.imgur.com/" + person.imageId + "s.jpg";
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
ul {
    list-style-type: none;
    padding: 0px 10px;
}
li {
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center;
}
img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

Displaying several DOM nodes for each list item

What do you do when each item needs to render not one, but several DOM nodes?

The short <>... Fragment syntax won't let you pass a key, so you need to either group them into a single <div>, or use the slightly longer and more explicit <Fragment> syntax:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { Fragment } from "react";

// ...

const listItems = people.map((person) => (
    <Fragment key={person.id}>
        <h1>{person.name}</h1>
        <p>{person.bio}</p>
    </Fragment>
));

Fragments disappear from the DOM, so this will produce a flat list of <h1>, <p>, <h1>, <p>, and so on.

Where to get your key

Different sources of data provide different sources of keys:

  • Data from a database: If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.
  • Locally generated data: If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, crypto.randomUUID() or a package like uuid when creating items.

Rules of keys

  • Keys must be unique among siblings. However, it’s okay to use the same keys for JSX nodes in different arrays.
  • Keys must not change or that defeats their purpose! Don't generate them while rendering.

Why does React need keys?

Imagine that files on your desktop didn't have names. Instead, you'd refer to them by their order -- the first file, the second file, and so on. You could get used to it, but once you delete a file, it would get confusing. The second file would become the first file, the third file would be the second file, and so on.

File names in a folder and JSX keys in an array serve a similar purpose. They let us uniquely identify an item between its siblings. A well-chosen key provides more information than the position within the array. Even if the position changes due to reordering, the key lets React identify the item throughout its lifetime.

You might be tempted to use an item's index in the array as its key. In fact, that's what React will use if you don't specify a key at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.

Similarly, do not generate keys on the fly, e.g. with key={Math.random()}. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data.

Note that your components won't receive key as a prop. It's only used as a hint by React itself. If your component needs an ID, you have to pass it as a separate prop: <Profile key={id} userId={id} />.

On this page you learned:

  • How to move data out of components and into data structures like arrays and objects.
  • How to generate sets of similar components with JavaScript's map().
  • How to create arrays of filtered items with JavaScript's filter().
  • Why and how to set key on each component in a collection so React can keep track of each of them even if their position or data changes.

Splitting a list in two

This example shows a list of all people.

Change it to show two separate lists one after another: Chemists and Everyone Else. Like previously, you can determine whether a person is a chemist by checking if person.profession === 'chemist'.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import { people } from "./data.js";
import { getImageUrl } from "./utils.js";

export default function List() {
    const listItems = people.map((person) => (
        <li key={person.id}>
            <img src={getImageUrl(person)} alt={person.name} />
            <p>
                <b>{person.name}:</b>
                {" " + person.profession + " "}
                known for {person.accomplishment}
            </p>
        </li>
    ));
    return (
        <article>
            <h1>Scientists</h1>
            <ul>{listItems}</ul>
        </article>
    );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
export const people = [
    {
        id: 0,
        name: "Creola Katherine Johnson",
        profession: "mathematician",
        accomplishment: "spaceflight calculations",
        imageId: "MK3eW3A",
    },
    {
        id: 1,
        name: "Mario José Molina-Pasquel Henríquez",
        profession: "chemist",
        accomplishment: "discovery of Arctic ozone hole",
        imageId: "mynHUSa",
    },
    {
        id: 2,
        name: "Mohammad Abdus Salam",
        profession: "physicist",
        accomplishment: "electromagnetism theory",
        imageId: "bE7W1ji",
    },
    {
        id: 3,
        name: "Percy Lavon Julian",
        profession: "chemist",
        accomplishment:
            "pioneering cortisone drugs, steroids and birth control pills",
        imageId: "IOjWm71",
    },
    {
        id: 4,
        name: "Subrahmanyan Chandrasekhar",
        profession: "astrophysicist",
        accomplishment: "white dwarf star mass calculations",
        imageId: "lrWQx8l",
    },
];

1
2
3
export function getImageUrl(person) {
    return "https://i.imgur.com/" + person.imageId + "s.jpg";
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
ul {
    list-style-type: none;
    padding: 0px 10px;
}
li {
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center;
}
img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

You could use filter() twice, creating two separate arrays, and then map over both of them:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { people } from "./data.js";
import { getImageUrl } from "./utils.js";

export default function List() {
    const chemists = people.filter((person) => person.profession === "chemist");
    const everyoneElse = people.filter(
        (person) => person.profession !== "chemist"
    );
    return (
        <article>
            <h1>Scientists</h1>
            <h2>Chemists</h2>
            <ul>
                {chemists.map((person) => (
                    <li key={person.id}>
                        <img src={getImageUrl(person)} alt={person.name} />
                        <p>
                            <b>{person.name}:</b>
                            {" " + person.profession + " "}
                            known for {person.accomplishment}
                        </p>
                    </li>
                ))}
            </ul>
            <h2>Everyone Else</h2>
            <ul>
                {everyoneElse.map((person) => (
                    <li key={person.id}>
                        <img src={getImageUrl(person)} alt={person.name} />
                        <p>
                            <b>{person.name}:</b>
                            {" " + person.profession + " "}
                            known for {person.accomplishment}
                        </p>
                    </li>
                ))}
            </ul>
        </article>
    );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
export const people = [
    {
        id: 0,
        name: "Creola Katherine Johnson",
        profession: "mathematician",
        accomplishment: "spaceflight calculations",
        imageId: "MK3eW3A",
    },
    {
        id: 1,
        name: "Mario José Molina-Pasquel Henríquez",
        profession: "chemist",
        accomplishment: "discovery of Arctic ozone hole",
        imageId: "mynHUSa",
    },
    {
        id: 2,
        name: "Mohammad Abdus Salam",
        profession: "physicist",
        accomplishment: "electromagnetism theory",
        imageId: "bE7W1ji",
    },
    {
        id: 3,
        name: "Percy Lavon Julian",
        profession: "chemist",
        accomplishment:
            "pioneering cortisone drugs, steroids and birth control pills",
        imageId: "IOjWm71",
    },
    {
        id: 4,
        name: "Subrahmanyan Chandrasekhar",
        profession: "astrophysicist",
        accomplishment: "white dwarf star mass calculations",
        imageId: "lrWQx8l",
    },
];

1
2
3
export function getImageUrl(person) {
    return "https://i.imgur.com/" + person.imageId + "s.jpg";
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
ul {
    list-style-type: none;
    padding: 0px 10px;
}
li {
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center;
}
img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

In this solution, the map calls are placed directly inline into the parent <ul> elements, but you could introduce variables for them if you find that more readable.

There is still a bit duplication between the rendered lists. You can go further and extract the repetitive parts into a <ListSection> component:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { people } from "./data.js";
import { getImageUrl } from "./utils.js";

function ListSection({ title, people }) {
    return (
        <>
            <h2>{title}</h2>
            <ul>
                {people.map((person) => (
                    <li key={person.id}>
                        <img src={getImageUrl(person)} alt={person.name} />
                        <p>
                            <b>{person.name}:</b>
                            {" " + person.profession + " "}
                            known for {person.accomplishment}
                        </p>
                    </li>
                ))}
            </ul>
        </>
    );
}

export default function List() {
    const chemists = people.filter((person) => person.profession === "chemist");
    const everyoneElse = people.filter(
        (person) => person.profession !== "chemist"
    );
    return (
        <article>
            <h1>Scientists</h1>
            <ListSection title="Chemists" people={chemists} />
            <ListSection title="Everyone Else" people={everyoneElse} />
        </article>
    );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
export const people = [
    {
        id: 0,
        name: "Creola Katherine Johnson",
        profession: "mathematician",
        accomplishment: "spaceflight calculations",
        imageId: "MK3eW3A",
    },
    {
        id: 1,
        name: "Mario José Molina-Pasquel Henríquez",
        profession: "chemist",
        accomplishment: "discovery of Arctic ozone hole",
        imageId: "mynHUSa",
    },
    {
        id: 2,
        name: "Mohammad Abdus Salam",
        profession: "physicist",
        accomplishment: "electromagnetism theory",
        imageId: "bE7W1ji",
    },
    {
        id: 3,
        name: "Percy Lavon Julian",
        profession: "chemist",
        accomplishment:
            "pioneering cortisone drugs, steroids and birth control pills",
        imageId: "IOjWm71",
    },
    {
        id: 4,
        name: "Subrahmanyan Chandrasekhar",
        profession: "astrophysicist",
        accomplishment: "white dwarf star mass calculations",
        imageId: "lrWQx8l",
    },
];

1
2
3
export function getImageUrl(person) {
    return "https://i.imgur.com/" + person.imageId + "s.jpg";
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
ul {
    list-style-type: none;
    padding: 0px 10px;
}
li {
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center;
}
img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

A very attentive reader might notice that with two filter calls, we check each person's profession twice. Checking a property is very fast, so in this example it's fine. If your logic was more expensive than that, you could replace the filter calls with a loop that manually constructs the arrays and checks each person once.

In fact, if people never change, you could move this code out of your component. From React's perspective, all that matters is that you give it an array of JSX nodes in the end. It doesn't care how you produce that array:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import { people } from "./data.js";
import { getImageUrl } from "./utils.js";

let chemists = [];
let everyoneElse = [];
people.forEach((person) => {
    if (person.profession === "chemist") {
        chemists.push(person);
    } else {
        everyoneElse.push(person);
    }
});

function ListSection({ title, people }) {
    return (
        <>
            <h2>{title}</h2>
            <ul>
                {people.map((person) => (
                    <li key={person.id}>
                        <img src={getImageUrl(person)} alt={person.name} />
                        <p>
                            <b>{person.name}:</b>
                            {" " + person.profession + " "}
                            known for {person.accomplishment}
                        </p>
                    </li>
                ))}
            </ul>
        </>
    );
}

export default function List() {
    return (
        <article>
            <h1>Scientists</h1>
            <ListSection title="Chemists" people={chemists} />
            <ListSection title="Everyone Else" people={everyoneElse} />
        </article>
    );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
export const people = [
    {
        id: 0,
        name: "Creola Katherine Johnson",
        profession: "mathematician",
        accomplishment: "spaceflight calculations",
        imageId: "MK3eW3A",
    },
    {
        id: 1,
        name: "Mario José Molina-Pasquel Henríquez",
        profession: "chemist",
        accomplishment: "discovery of Arctic ozone hole",
        imageId: "mynHUSa",
    },
    {
        id: 2,
        name: "Mohammad Abdus Salam",
        profession: "physicist",
        accomplishment: "electromagnetism theory",
        imageId: "bE7W1ji",
    },
    {
        id: 3,
        name: "Percy Lavon Julian",
        profession: "chemist",
        accomplishment:
            "pioneering cortisone drugs, steroids and birth control pills",
        imageId: "IOjWm71",
    },
    {
        id: 4,
        name: "Subrahmanyan Chandrasekhar",
        profession: "astrophysicist",
        accomplishment: "white dwarf star mass calculations",
        imageId: "lrWQx8l",
    },
];

1
2
3
export function getImageUrl(person) {
    return "https://i.imgur.com/" + person.imageId + "s.jpg";
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
ul {
    list-style-type: none;
    padding: 0px 10px;
}
li {
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center;
}
img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

Nested lists in one component

Make a list of recipes from this array! For each recipe in the array, display its name as an <h2> and list its ingredients in a <ul>.

This will require nesting two different map calls.

1
2
3
4
5
6
7
8
9
import { recipes } from "./data.js";

export default function RecipeList() {
    return (
        <div>
            <h1>Recipes</h1>
        </div>
    );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
export const recipes = [
    {
        id: "greek-salad",
        name: "Greek Salad",
        ingredients: ["tomatoes", "cucumber", "onion", "olives", "feta"],
    },
    {
        id: "hawaiian-pizza",
        name: "Hawaiian Pizza",
        ingredients: [
            "pizza crust",
            "pizza sauce",
            "mozzarella",
            "ham",
            "pineapple",
        ],
    },
    {
        id: "hummus",
        name: "Hummus",
        ingredients: [
            "chickpeas",
            "olive oil",
            "garlic cloves",
            "lemon",
            "tahini",
        ],
    },
];

Here is one way you could go about it:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import { recipes } from "./data.js";

export default function RecipeList() {
    return (
        <div>
            <h1>Recipes</h1>
            {recipes.map((recipe) => (
                <div key={recipe.id}>
                    <h2>{recipe.name}</h2>
                    <ul>
                        {recipe.ingredients.map((ingredient) => (
                            <li key={ingredient}>{ingredient}</li>
                        ))}
                    </ul>
                </div>
            ))}
        </div>
    );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
export const recipes = [
    {
        id: "greek-salad",
        name: "Greek Salad",
        ingredients: ["tomatoes", "cucumber", "onion", "olives", "feta"],
    },
    {
        id: "hawaiian-pizza",
        name: "Hawaiian Pizza",
        ingredients: [
            "pizza crust",
            "pizza sauce",
            "mozzarella",
            "ham",
            "pineapple",
        ],
    },
    {
        id: "hummus",
        name: "Hummus",
        ingredients: [
            "chickpeas",
            "olive oil",
            "garlic cloves",
            "lemon",
            "tahini",
        ],
    },
];

Each of the recipes already includes an id field, so that's what the outer loop uses for its key. There is no ID you could use to loop over ingredients. However, it's reasonable to assume that the same ingredient won't be listed twice within the same recipe, so its name can serve as a key. Alternatively, you could change the data structure to add IDs, or use index as a key (with the caveat that you can't safely reorder ingredients).

Extracting a list item component

This RecipeList component contains two nested map calls. To simplify it, extract a Recipe component from it which will accept id, name, and ingredients props. Where do you place the outer key and why?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import { recipes } from "./data.js";

export default function RecipeList() {
    return (
        <div>
            <h1>Recipes</h1>
            {recipes.map((recipe) => (
                <div key={recipe.id}>
                    <h2>{recipe.name}</h2>
                    <ul>
                        {recipe.ingredients.map((ingredient) => (
                            <li key={ingredient}>{ingredient}</li>
                        ))}
                    </ul>
                </div>
            ))}
        </div>
    );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
export const recipes = [
    {
        id: "greek-salad",
        name: "Greek Salad",
        ingredients: ["tomatoes", "cucumber", "onion", "olives", "feta"],
    },
    {
        id: "hawaiian-pizza",
        name: "Hawaiian Pizza",
        ingredients: [
            "pizza crust",
            "pizza sauce",
            "mozzarella",
            "ham",
            "pineapple",
        ],
    },
    {
        id: "hummus",
        name: "Hummus",
        ingredients: [
            "chickpeas",
            "olive oil",
            "garlic cloves",
            "lemon",
            "tahini",
        ],
    },
];

You can copy-paste the JSX from the outer map into a new Recipe component and return that JSX. Then you can change recipe.name to name, recipe.id to id, and so on, and pass them as props to the Recipe:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { recipes } from "./data.js";

function Recipe({ id, name, ingredients }) {
    return (
        <div>
            <h2>{name}</h2>
            <ul>
                {ingredients.map((ingredient) => (
                    <li key={ingredient}>{ingredient}</li>
                ))}
            </ul>
        </div>
    );
}

export default function RecipeList() {
    return (
        <div>
            <h1>Recipes</h1>
            {recipes.map((recipe) => (
                <Recipe {...recipe} key={recipe.id} />
            ))}
        </div>
    );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
export const recipes = [
    {
        id: "greek-salad",
        name: "Greek Salad",
        ingredients: ["tomatoes", "cucumber", "onion", "olives", "feta"],
    },
    {
        id: "hawaiian-pizza",
        name: "Hawaiian Pizza",
        ingredients: [
            "pizza crust",
            "pizza sauce",
            "mozzarella",
            "ham",
            "pineapple",
        ],
    },
    {
        id: "hummus",
        name: "Hummus",
        ingredients: [
            "chickpeas",
            "olive oil",
            "garlic cloves",
            "lemon",
            "tahini",
        ],
    },
];

Here, <Recipe {...recipe} key={recipe.id} /> is a syntax shortcut saying "pass all properties of the recipe object as props to the Recipe component". You could also write each prop explicitly: <Recipe id={recipe.id} name={recipe.name} ingredients={recipe.ingredients} key={recipe.id} />.

Note that the key is specified on the <Recipe> itself rather than on the root <div> returned from Recipe. This is because this key is needed directly within the context of the surrounding array. Previously, you had an array of <div>s so each of them needed a key, but now you have an array of <Recipe>s. In other words, when you extract a component, don't forget to leave the key outside the JSX you copy and paste.

List with a separator

This example renders a famous haiku by Katsushika Hokusai, with each line wrapped in a <p> tag. Your job is to insert an <hr /> separator between each paragraph. Your resulting structure should look like this:

1
2
3
4
5
6
7
<article>
    <p>I write, erase, rewrite</p>
    <hr />
    <p>Erase again, and then</p>
    <hr />
    <p>A poppy blooms.</p>
</article>

A haiku only contains three lines, but your solution should work with any number of lines. Note that <hr /> elements only appear between the <p> elements, not in the beginning or the end!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
const poem = {
    lines: [
        "I write, erase, rewrite",
        "Erase again, and then",
        "A poppy blooms.",
    ],
};

export default function Poem() {
    return (
        <article>
            {poem.lines.map((line, index) => (
                <p key={index}>{line}</p>
            ))}
        </article>
    );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
body {
    text-align: center;
}
p {
    font-family: Georgia, serif;
    font-size: 20px;
    font-style: italic;
}
hr {
    margin: 0 120px 0 120px;
    border: 1px dashed #45c3d8;
}

(This is a rare case where index as a key is acceptable because a poem's lines will never reorder.)

You'll either need to convert map to a manual loop, or use a fragment.

You can write a manual loop, inserting <hr /> and <p>...</p> into the output array as you go:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
const poem = {
    lines: [
        "I write, erase, rewrite",
        "Erase again, and then",
        "A poppy blooms.",
    ],
};

export default function Poem() {
    let output = [];

    // Fill the output array
    poem.lines.forEach((line, i) => {
        output.push(<hr key={i + "-separator"} />);
        output.push(<p key={i + "-text"}>{line}</p>);
    });
    // Remove the first <hr />
    output.shift();

    return <article>{output}</article>;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
body {
    text-align: center;
}
p {
    font-family: Georgia, serif;
    font-size: 20px;
    font-style: italic;
}
hr {
    margin: 0 120px 0 120px;
    border: 1px dashed #45c3d8;
}

Using the original line index as a key doesn't work anymore because each separator and paragraph are now in the same array. However, you can give each of them a distinct key using a suffix, e.g. key={i + '-text'}.

Alternatively, you could render a collection of fragments which contain <hr /> and <p>...</p>. However, the <>... shorthand syntax doesn't support passing keys, so you'd have to write <Fragment> explicitly:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Fragment } from "react";

const poem = {
    lines: [
        "I write, erase, rewrite",
        "Erase again, and then",
        "A poppy blooms.",
    ],
};

export default function Poem() {
    return (
        <article>
            {poem.lines.map((line, i) => (
                <Fragment key={i}>
                    {i > 0 && <hr />}
                    <p>{line}</p>
                </Fragment>
            ))}
        </article>
    );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
body {
    text-align: center;
}
p {
    font-family: Georgia, serif;
    font-size: 20px;
    font-style: italic;
}
hr {
    margin: 0 120px 0 120px;
    border: 1px dashed #45c3d8;
}

Remember, fragments (often written as <>) let you group JSX nodes without adding extra <div>s!

Last update: August 28, 2023
Authors: Archmonger