Lists and Keys

Introduction

A huge amount of UI is really just a list rendered over and over — a list of products, comments, todo items, or search results. React makes this easy by letting you use plain JavaScript array methods, especially .map(), directly inside JSX to turn an array of data into an array of elements.

But rendering lists comes with one rule you cannot skip: every item needs a special key prop. In this lesson you will learn how to render arrays with .map(), why React insists on keys, how to pick a good one, and what the console warning about missing keys actually means.

Rendering an Array with .map()

To render a list in React, you call .map() on your array of data and return a piece of JSX for each item. The result is an array of elements, which React is happy to render directly inside your JSX.

function FruitList() {
  const fruits = ["Apple", "Banana", "Mango"];

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

- Apple
- Banana
- Mango

This same pattern works for arrays of objects too, which is far more common in real applications — you just pull out the properties you need inside the .map() callback.

function UserList() {
  const users = [
    { id: "u1", name: "Amaya" },
    { id: "u2", name: "Kenji" },
    { id: "u3", name: "Priya" },
  ];

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

- Amaya
- Kenji
- Priya

Why Keys Are Required

When a list re-renders — an item is added, removed, or reordered — React needs a way to match up each element in the new list with the corresponding element in the previous list, so it knows which parts of the real DOM actually need to change. The key prop is exactly that: a stable identity for each item across renders.

Without keys, React has to guess based on position alone, which can lead to mismatched DOM nodes, lost input state, or unnecessary re-rendering of items that did not actually change.

Choosing a Good Key

The best key is a value that is both unique among siblings and stable across re-renders — typically an ID that already exists in your data, like a database ID or a unique field from your API response.

const todos = [
  { id: "t1", text: "Buy milk" },
  { id: "t2", text: "Walk the dog" },
];

// Good: a stable, unique ID from the data itself
todos.map((todo) => <li key={todo.id}>{todo.text}</li>);

It is tempting to just use the array index (map((item, index) => ...)) as the key, and it works fine for a static list that never reorders, gets filtered, or has items inserted or removed. But once the list changes shape, the index for a given item can shift, which breaks the whole point of a stable key.

// Risky if this list can be reordered, filtered, or have items removed
todos.map((todo, index) => <li key={index}>{todo.text}</li>);

The Missing Key Warning

If you render a list without a key prop, React does not throw an error — the list still displays — but it logs a console warning to let you know something important is missing.

function ColorList() {
  const colors = ["Red", "Green", "Blue"];

  return (
    <ul>
      {colors.map((color) => (
        <li>{color}</li> // no key prop here
      ))}
    </ul>
  );
}

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

Check the render method of `ColorList`.

The fix is simple — add a unique key to the outermost element returned inside the .map() callback.

function ColorList() {
  const colors = ["Red", "Green", "Blue"];

  return (
    <ul>
      {colors.map((color) => (
        <li key={color}>{color}</li>
      ))}
    </ul>
  );
}

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Rendering lists is one of the most frequent tasks in any React app, and .map() combined with a well-chosen key makes it both simple and reliable. Keys are the small detail that lets React efficiently and correctly update lists as your data changes.

In this lesson, you learned how to render arrays with .map(), why the key prop matters, how to choose a stable and unique key, and what the missing-key warning is telling you. Next, you will learn how to build forms in React and handle their submission.