Listas y Keys

Renderizando Listas

En React, usas el metodo map() de JavaScript para transformar arrays de datos en arrays de elementos JSX.

Ejemplo Basico de Lista

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

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

Por que las Keys son Importantes

Las keys ayudan a React a identificar que items han cambiado, sido agregados o eliminados. Deben ser unicas entre hermanos.

// Bueno - usando IDs unicos
const usuarios = [
  { id: 1, nombre: 'Ana' },
  { id: 2, nombre: 'Juan' },
  { id: 3, nombre: 'Maria' }
];

function ListaUsuarios() {
  return (
    <ul>
      {usuarios.map(usuario => (
        <li key={usuario.id}>{usuario.nombre}</li>
      ))}
    </ul>
  );
}

// Evitar - usar indice como key cuando la lista puede cambiar
// Solo es seguro si la lista es estatica y nunca se reordena

Renderizando Objetos Complejos

function ListaProductos() {
  const productos = [
    { id: 'p1', nombre: 'Laptop', precio: 999, enStock: true },
    { id: 'p2', nombre: 'Telefono', precio: 699, enStock: false },
    { id: 'p3', nombre: 'Tablet', precio: 499, enStock: true }
  ];

  return (
    <div className="grid">
      {productos.map(producto => (
        <div key={producto.id} className="tarjeta-producto">
          <h3>{producto.nombre}</h3>
          <p>Precio: ${producto.precio}</p>
          <p>{producto.enStock ? 'En Stock' : 'Agotado'}</p>
        </div>
      ))}
    </div>
  );
}

Extrayendo Componentes de Lista

// Componente de item individual
function ItemProducto({ producto }) {
  return (
    <div className="tarjeta-producto">
      <h3>{producto.nombre}</h3>
      <p>Precio: ${producto.precio}</p>
    </div>
  );
}

// Componente de lista
function ListaProductos({ productos }) {
  return (
    <div className="grid">
      {productos.map(producto => (
        <ItemProducto key={producto.id} producto={producto} />
      ))}
    </div>
  );
}

Filtrando y Mapeando

function ListaTareas({ tareas }) {
  const tareasPendientes = tareas.filter(t => !t.completada);
  const tareasCompletadas = tareas.filter(t => t.completada);

  return (
    <div>
      <h2>Pendientes ({tareasPendientes.length})</h2>
      <ul>
        {tareasPendientes.map(tarea => (
          <li key={tarea.id}>{tarea.texto}</li>
        ))}
      </ul>

      <h2>Completadas ({tareasCompletadas.length})</h2>
      <ul>
        {tareasCompletadas.map(tarea => (
          <li key={tarea.id} style={{ textDecoration: 'line-through' }}>
            {tarea.texto}
          </li>
        ))}
      </ul>
    </div>
  );
}