JavaScript

Each child in a list should have a unique "key" prop: What It Means and How to Fix It

Error reference

Each child in a list should have a unique "key" prop

Language

JavaScript

Severity

Low

When it happens

This React warning (which becomes a hard error in some contexts) is shown when you render a list of elements without providing a unique key prop on each element.

Potential fixes

Add a stable, unique key prop to each element returned inside .map(). Use a record's database ID or a stable unique identifier, not the array index. Array indices cause subtle bugs when the list is reordered or items are removed from the middle.

Related errors

TypeError

Deep dive

This React warning (which becomes a hard error in some contexts) is shown when you render a list of elements without providing a unique key prop on each element. React uses keys to efficiently reconcile list updates: without them it cannot tell which items changed, were added, or were removed.

Why it happens

•Mapping over an array and returning JSX elements without a key prop.
•Using an array index as the key when items can be reordered or removed.
•Wrapping list items in a Fragment without passing key to the Fragment.
•Returning multiple sibling elements from a component used in a list context.

Potential fixes

Add a stable, unique key prop to each element returned inside .map(). Use a record's database ID or a stable unique identifier, not the array index. Array indices cause subtle bugs when the list is reordered or items are removed from the middle.

Examples

JavaScript

Code that triggers the error

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

Error output

Warning: Each child in a list should have a unique "key" prop.
Check the render method of `UserList`.

Fixed code

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

Practice in English

How would you explain an Each child in a list should have a unique "key" prop to a fellow dev? Choose the right phrase:

"I hit an error...

Ready to practice your English at work?

Lingua-e has interactive exercises built around real developer conversations: standups, code reviews, retrospectives, and more. Practice until it comes naturally.

Try Lingua-e for free