Renderizando colecciones en React

El renderizado de colecciones en React se refiere a tomar una colección (normalmente un array) y transformarlo en una colección de elementos JSX para ser renderizados en la interfaz.

En este artículo vamos a ver cómo React convierte esos Arrays de datos en Arrays de componentes visuales.

El método .map()

Si venís de la programación imperativa (programación “normal”), vuestro instinto seguramente sea usar un bucle for o un forEach para iterar sobre los datos y pintar cosas.

Pero recordemos que en JSX solo podemos usar expresiones (cosas que devuelven un valor). Y un bucle for… no devuelve nada 😉.

El método .map() es perfecto porque transforma un array en otro array del mismo tamaño. Nosotros tomamos un array de datos (objetos, strings) y lo transformamos en un array de elementos JSX.

const frutas = ['Manzana', 'Banana', 'Cereza'];

function ListaFrutas() {
  // Transformamos strings -> <li>
  const elementosLista = frutas.map((fruta) => {
    return <li>{fruta}</li>;
  });

  return (
    <ul>
      {elementosLista}
    </ul>
  );
}

Generalmente, hacemos esto directamente dentro del JSX (inline) para ahorrar código:

function ListaFrutas() {
  const frutas = ['Manzana', 'Banana', 'Cereza'];

  return (
    <ul>
      {frutas.map((fruta) => (
        <li>{fruta}</li>
      ))}
    </ul>
  );
}

React es lo suficientemente inteligente como para recibir un array de elementos JSX y pintarlos uno detrás de otro.

Renderizando componentes

Por supuesto, no estamos limitados a etiquetas HTML simples como <li>. Lo podemos usarlo para renderizar componentes enteros.

Imaginad que tenemos un array de objetos:

const usuarios = [
  { id: 1, nombre: 'Luis', rol: 'Admin' },
  { id: 2, nombre: 'María', rol: 'User' },
  { id: 3, nombre: 'Carlos', rol: 'Editor' }
];

function UserList() {
  return (
    <div className="grid">
      {usuarios.map((usuario) => (
        // Pasamos todo el objeto o props individuales
        <UserCard 
          nombre={usuario.nombre} 
          rol={usuario.rol} 
        />
      ))}
    </div>
  );
}

Hasta aquí todo parece correcto. El código funciona y vemos la lista. Pero si abrimos la consola del navegador (F12), veremos una advertencia en rojo chillón.

Warning: Each child in a list should have a unique “key” prop.

Acabas de encontrar uno de los mensajes de advertencia más habituales y famosos de React. ¿Por qué pasa? Lo vemos ahora mismo 👇.

La importancia de la key

El mensaje anterior se queja de que no has definido la prop key. Este es un atributo especial que debemos incluir al crear listas de elementos.

// Forma correcta
<UserCard key={usuario.id} nombre={usuario.nombre} ... />

Cada elemento de una lista renderizada con .map() debe tener una propiedad especial llamada key. Esta clave permite a React identificar cada ítem de manera única al actualizar o reordenar elemento.

¿Qué usar como Key?

{productos.map(producto => (
  <Producto key={producto.id} data={producto} />
))}

// ¡EVITA ESTO SI ES POSIBLE!
{items.map((item, index) => (
  <li key={index}>{item}</li>
))}

Detalles técnicos a tener en cuenta

1. Las Keys deben ser únicas entre hermanos: No necesitan ser únicas en toda la app (si lo son, incluso mejor), solo dentro de su lista padre.
2. La Key se define en el .map(): Si extraéis el elemento a un componente, la key va en la llamada al componente, no dentro del HTML del componente.

// ❌ MAL
function Lista() {
  return items.map(item => <Item item={item} />);
}
function Item({ item }) {
  return <li key={item.id}>{item.nombre}</li>; // La key aquí no sirve  
}

// ✔️ BIEN
function Lista() {
  // La key va en el elemento más externo que devuelve el map
  return items.map(item => <Item key={item.id} item={item} />);
}

3. La Key no es una Prop: Si intentáis leer props.key dentro del componente hijo, veréis que es undefined. React se “come” la key para su uso interno y no la pasa hacia abajo. Si necesitáis el ID dentro del componente, pasadlo en otra prop explícita (ej: id={usuario.id}).