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

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

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

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

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

Related errors

• TypeError