¿Qué significa Each child in a list should have a unique "key" prop?

Esta advertencia de React (que se convierte en error en algunos contextos) aparece cuando renderizas una lista de elementos sin proporcionar una prop key única en cada elemento. React usa las keys para reconciliar eficientemente las actualizaciones de listas: sin ellas no puede determinar qué elementos cambiaron, se agregaron o se eliminaron.

Por qué ocurre

• •Iterar sobre un array con .map() y retornar elementos JSX sin una prop key.
• •Usar el índice del array como key cuando los elementos pueden reordenarse o eliminarse.
• •Envolver elementos de lista en un Fragment sin pasar key al Fragment.
• •Retornar múltiples elementos hermanos desde un componente usado en un contexto de lista.

Ejemplos

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>
  );
}

Errores relacionados

• TypeError