Lingua-e
JavaScript

What is a Each child in a list should have a unique "key" prop?

← Errors

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.

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`.

How to fix it

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.

Fixed code

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

Related errors

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