Lists & Keys

Rendering a list of items from an array is one of the most common things a React component does, and the `key` prop is what lets React tell items apart efficiently across re-renders.

Rendering Arrays with map

To render a list, you map over an array and return JSX for each item - there is no special "list" syntax in JSX, just `array.map(item => <Component key={...} {...} />)` embedded inside `{ }`.

Try it yourself

Rendering a simple list

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry'];

  return (
    <ul>
      {fruits.map(fruit => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

render(<FruitList />);

Output

Apple
Banana
Cherry

Why key Matters

React uses the `key` prop to match elements between renders - it is how React knows "this is the same logical item as before" versus "this is a brand new item," so it can update, reorder, or remove exactly the right DOM nodes instead of tearing down and rebuilding the whole list. Keys must be unique among siblings, but do not need to be globally unique.

Without a stable key, React falls back to comparing elements by position, which can cause subtle bugs - especially with input state getting mixed up between items when the list is reordered or filtered.

Why Array Index Is a Risky Key

Using the array index as a key (`key={index}`) works fine for a static list that never reorders, gets filtered, or has items inserted/removed from the middle. But if the list changes shape, indices shift and no longer correspond to the same logical item, which can cause React to reuse DOM/state incorrectly - for example, a text input keeping its typed value even though the item it was attached to moved.

Try it yourself

Prefer a stable id over the array index

function TodoList() {
  const todos = [
    { id: 'a1', text: 'Buy milk' },
    { id: 'a2', text: 'Walk the dog' },
    { id: 'a3', text: 'Write React notes' },
  ];

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

render(<TodoList />);

Output

Buy milk
Walk the dog
Write React notes

Filtering and Transforming Before Rendering

Because rendering a list is just an expression, you can chain `.filter()` and `.map()` before returning JSX, exactly like you would with any other array in JavaScript - React does not need anything special for this.

Try it yourself

Filtering a list before mapping it

function ActiveUsers() {
  const users = [
    { id: 1, name: 'Ana', active: true },
    { id: 2, name: 'Ben', active: false },
    { id: 3, name: 'Cid', active: true },
  ];

  return (
    <ul>
      {users
        .filter(u => u.active)
        .map(u => (
          <li key={u.id}>{u.name}</li>
        ))}
    </ul>
  );
}

render(<ActiveUsers />);

Output

Coding challenge

Given an array of task objects each with id and label, render them as a list of checkboxes with proper keys, where checking one crosses out its label with a strikethrough style.

function TaskList() {
  const tasks = [
    { id: 1, label: 'Read chapter 1' },
    { id: 2, label: 'Write notes' },
    { id: 3, label: 'Practice quiz' },
  ];
  // write your code here
  return null;
}

render(<TaskList />);

Output

Answer every question below to mark this chapter as complete.

Quiz Yourself

Score: 0/4

1. What is the purpose of the `key` prop when rendering a list?

2. When is using the array index as a key risky?

3. Do keys need to be globally unique across the entire app?

4. What is the idiomatic way to render a filtered subset of an array in JSX?