Listas y claves — Dibujar arreglos en la pantalla

Al finalizar este tema

Comprenderá cómo renderizar arreglos en React y el papel de las claves.

Renderizado de listas con map

Para mostrar datos de un arreglo en la pantalla, utilice map:

const fruits = ["Apple", "Banana", "Cherry"];

function FruitList() {
  return (
    <ul>
      {fruits.map(fruit => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

Convierte cada elemento del array a JSX. Sin embargo, existe una prop especial llamada key.

¿Por qué se necesitan las claves (keys)?

Cuando se agregan, eliminan o reordenan elementos en una lista, React debe saber qué elemento ha cambiado. La clave actúa como un identificador único para cada elemento.

Sin claves, React compara solo por posición:

Anterior: [A, B, C]
Posterior: [X, A, B, C]

Si no hay clave (key), React determina que "el primero cambió de A a X, el segundo de B a A, ..." en su totalidad. Si existe una clave, solo detecta que "X se ha añadido".

Reglas para las claves

// Si hay un ID único — lo mejor
{users.map(user => (
  <UserCard key={user.id} user={user} />
))}

// Si no hay valor único en los datos — segunda opción
{items.map(item => (
  <li key={item.name}>{item.name}</li>
))}

La clave debe ser única entre los hermanos. El ID de la base de datos es la mejor opción.

Por qué no se deben usar índices como claves

// Evitar
{items.map((item, index) => (
  <li key={index}>{item}</li>
))}

Cuando se agregan, eliminan o reordenan elementos, el índice cambia. Un elemento que era "el número 3" pasa a ser "el número 2" tras su eliminación. React asume erróneamente que es el mismo elemento porque la clave (key) coincide.

Resultado: los valores de los campos de entrada se asignan incorrectamente a otros elementos, o las animaciones se comportan de manera extraña.

Cuándo está permitido usar índices:

• Cuando la lista es fija y nunca cambia.
• Cuando los elementos no tienen estado ni campos de entrada.

En cualquier otro caso, utilice un valor único como clave.

La clave (key) no es una prop

function UserCard({ key, user }) {
  // La clave no es accesible aquí!
}

La propiedad key es un atributo especial utilizado internamente por React. No se puede acceder a ella desde los componentes hijos mediante props.key. Si necesitas un identificador, pásalo como una propiedad separada:

<UserCard key={user.id} userId={user.id} user={user} />

Clave principal

Convierte el arreglo a JSX usando map y asigna una clave única a cada elemento. La clave es necesaria para que React detecte eficientemente las inserciones, eliminaciones y reordenamientos de los elementos. Usa un ID único de los datos como clave. Evita usar el índice.