JavaScript

Qué significa Each child in a list should have a unique "key" prop y cómo solucionarlo

Referencia del error

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

Lenguaje

JavaScript

Severidad

Baja

Cuándo ocurre

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.

Posibles soluciones

Agrega una prop key estable y única a cada elemento retornado dentro de .map(). Usa el ID de base de datos del registro o un identificador único estable, no el índice del array. Los índices de array causan bugs sutiles cuando la lista se reordena o se eliminan elementos del medio.

Errores relacionados

TypeError

Más detalles

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.

Posibles soluciones

Agrega una prop key estable y única a cada elemento retornado dentro de .map(). Usa el ID de base de datos del registro o un identificador único estable, no el índice del array. Los índices de array causan bugs sutiles cuando la lista se reordena o se eliminan elementos del medio.

Ejemplos

JavaScript

Código que causa el error

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

Error en la terminal

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

Código corregido

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

Practica en inglés

¿Cómo le explicarías un Each child in a list should have a unique "key" prop a un compañero dev? Elige la frase correcta:

"I hit an error...

¿Listo para practicar tu inglés en el trabajo?

Lingua-e tiene ejercicios interactivos basados en conversaciones reales de developers: standups, code reviews, retrospectivas y más. Practica hasta que salga solo.

Prueba Lingua-e gratis