Listas, claves y renderizado condicional

⏱ 50 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Dibujar listas de datos con map.
Elegir una key correcta.
Mostrar u ocultar contenido con ternario, && y retorno anticipado.
Filtrar y ordenar sin duplicar estado.

1.Dibujar listas con map

En casi toda aplicación hay listas: productos, mensajes, tareas, resultados. En React no escribes cada elemento a mano: transformas un array de datos en un array de JSX con map, y React lo dibuja.

⚛️ De datos a elementos

Código (edítalo y pulsa Ejecutar)

const frutas = ["Manzana", "Pera", "Uva", "Mango"];

function App() {
  return (
    <main>
      <h2>Frutas</h2>
      <ul>
        {frutas.map((fruta) => (
          <li key={fruta}>{fruta}</li>
        ))}
      </ul>
    </main>
  );
}

Resultado

Consola

Tienes datos: un array (de textos, números u objetos).
map recorre cada elemento y devuelve un <li> por cada uno.
React recibe el array de elementos y los dibuja en orden.

Si cambias el array (por ejemplo, con estado) y React vuelve a dibujar, la lista se actualiza sola. No tienes que añadir ni quitar <li> a mano.

2.Listas de objetos y componentes

Lo normal es que cada elemento sea un objeto con varios datos. Un patrón muy limpio es crear un componente para el elemento y pasarle los datos como props:

⚛️ Una lista de objetos con un componente por elemento

Código (edítalo y pulsa Ejecutar)

const productos = [
  { id: 1, nombre: "Teclado", precio: 25 },
  { id: 2, nombre: "Mouse", precio: 12.5 },
  { id: 3, nombre: "Monitor", precio: 180 },
];

function Fila({ nombre, precio }) {
  return (
    <li>
      {nombre} — ${precio.toFixed(2)}
    </li>
  );
}

function App() {
  return (
    <ul>
      {productos.map((p) => (
        <Fila key={p.id} nombre={p.nombre} precio={p.precio} />
      ))}
    </ul>
  );
}

Resultado

Consola

💡 Consejo · Spread de props

Si el objeto tiene exactamente las props que espera el componente, puedes pasarlas de golpe: <Fila key={p.id} {...p} />. Úsalo con moderación: pasar las props de forma explícita deja claro qué recibe cada componente.

3.La prop key: la identidad de cada elemento

Seguramente notaste key={...} en los ejemplos. Es obligatoria en las listas: key le dice a React qué elemento es cuál entre un dibujo y el siguiente, para actualizar solo lo necesario y no mezclar su estado.

Ejecuta este ejemplo y abre la consola: React te avisa si falta la clave.

⚛️ ¿Qué pasa si falta la key?

Código (edítalo y pulsa Ejecutar)

const nombres = ["Ana", "Luis", "Marta"];

function App() {
  return (
    <ul>
      {/* Falta key en el <li>: mira la consola. Añade key={n} para arreglarlo. */}
      {nombres.map((n) => (
        <li>{n}</li>
      ))}
    </ul>
  );
}

Resultado

Consola

Regla de la clave	Por qué
Única entre hermanos de la misma lista	Dos elementos con la misma clave se confunden
Estable: no cambia entre dibujos	Si cambia, React cree que es otro elemento y lo reconstruye
Mejor un `id` de los datos	Identifica al dato aunque cambie de posición
Evita `Math.random()`	Genera una clave nueva en cada dibujo y destruye el estado
Índice solo en listas fijas que nunca se reordenan	Si se inserta, borra u ordena, las claves ya no corresponden a los mismos datos

⚠️ Importante · Dónde va la key

La key va en el elemento más externo que devuelve map (el <li> o el componente <Fila />), no dentro. Y no se recibe como prop: React la usa internamente.

4.Mostrar u ocultar: renderizado condicional

Como el JSX es JavaScript, decidir qué mostrar se hace con las herramientas de siempre. Hay tres patrones que usarás todos los días:

Patrón	Cuándo usarlo	Ejemplo
Ternario `? :`	Dos opciones: A o B	`{conectado ? <Panel /> : <Login />}`
AND `&&`	Mostrar algo o nada	`{hayError && <p>Error</p>}`
Retorno anticipado	Casos especiales al inicio del componente	`if (cargando) return <p>Cargando…</p>;`

⚛️ Tres formas de decidir qué se ve

Código (edítalo y pulsa Ejecutar)

import { useState } from "react";

function Mensajes({ lista }) {
  // 3) Retorno anticipado: caso especial primero
  if (lista.length === 0) return <p>📭 No tienes mensajes.</p>;
  return <ul>{lista.map((m) => <li key={m}>{m}</li>)}</ul>;
}

function App() {
  const [conectado, setConectado] = useState(false);
  const [lista, setLista] = useState([]);

  return (
    <main>
      {/* 1) Ternario: una cosa u otra */}
      <p>Estado: {conectado ? "🟢 Conectado" : "⚪ Desconectado"}</p>
      <button onClick={() => setConectado(!conectado)}>Cambiar</button>

      {/* 2) AND: algo o nada */}
      {conectado && <p>¡Bienvenida de vuelta!</p>}

      <h3>Mensajes</h3>
      <Mensajes lista={lista} />
      <button onClick={() => setLista([...lista, "Mensaje " + (lista.length + 1)])}>Recibir</button>
    </main>
  );
}

Resultado

Consola

⚠️ Importante · La trampa del 0

{lista.length && <Lista />} dibuja un 0 cuando la lista está vacía, porque 0 && … vale 0 y React sí muestra los números. Escribe una comparación: {lista.length > 0 && <Lista />}.

5.Filtrar y ordenar antes de dibujar

Lo que map dibuja puede venir de filter o sort. Calcula la lista visible antes del return y deja el JSX simple. Importante: no guardes en estado lo que puedes calcular a partir de otro estado.

⚛️ Un filtro con estado

Código (edítalo y pulsa Ejecutar)

import { useState } from "react";

const tareas = [
  { id: 1, texto: "Estudiar JSX", hecha: true },
  { id: 2, texto: "Practicar props", hecha: false },
  { id: 3, texto: "Aprender estado", hecha: false },
  { id: 4, texto: "Leer sobre listas", hecha: true },
];

function App() {
  const [soloPendientes, setSoloPendientes] = useState(false);

  // Valor derivado: se calcula en cada dibujo, no se guarda en estado
  const visibles = soloPendientes ? tareas.filter((t) => !t.hecha) : tareas;

  return (
    <main>
      <label>
        <input
          type="checkbox"
          checked={soloPendientes}
          onChange={(e) => setSoloPendientes(e.target.checked)}
        />{" "}
        Solo pendientes
      </label>
      <p>Mostrando {visibles.length} de {tareas.length}</p>
      <ul>
        {visibles.map((t) => (
          <li key={t.id} style={{ textDecoration: t.hecha ? "line-through" : "none" }}>
            {t.texto}
          </li>
        ))}
      </ul>
    </main>
  );
}

Resultado

Consola

6.Errores frecuentes

Olvidar la key: React avisa en la consola.
Usar el índice como clave en listas que se reordenan o se editan.
Poner la key dentro del elemento en lugar de en el elemento que devuelve map.
Olvidar el return en map con llaves: lista.map(x => { <li>{x}</li> }) devuelve undefined. Usa paréntesis (…) o escribe return.
{n && <X />} con n = 0: dibuja un 0. Compara con n > 0.
Mutar el array con sort(): ordena sobre el original. Haz primero una copia: [...lista].sort(…).
Guardar en estado la lista filtrada: guarda la lista completa y el criterio; calcula lo visible.

📒 Apuntes para llevar

Con lista.map(x => <li key={x.id}>…</li>) conviertes datos en elementos.
Toda lista necesita una key única y estable, preferiblemente el id del dato.
La key va en el elemento más externo que devuelve map.
Renderizado condicional: ternario (a ? b : c), && (algo o nada) y retorno anticipado.
Cuidado con {n && …}: si n es 0, se dibuja un 0.
Filtra y ordena antes del return; no guardes en estado lo que puedes calcular.
Usa [...lista].sort() para no mutar el original.

7.Glosario

Término	Significado
`map`	Método de arrays que transforma cada elemento y devuelve un array nuevo.
`key`	Identificador único y estable que React usa para distinguir los elementos de una lista.
Renderizado condicional	Decidir qué se muestra según una condición.
Valor derivado	Dato calculado a partir de otro estado o props; no se guarda aparte.
Retorno anticipado	`return` temprano en un componente para manejar un caso especial.
Reconciliación	Proceso con el que React compara dibujos y actualiza solo lo que cambió.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Para qué sirve la prop key?

¿Qué es lo más recomendable como key?

¿Qué dibuja {items.length && <Lista />} cuando items está vacío?

React muestra los números, y 0 && … vale 0. Usa items.length > 0 && ….

¿Cuál es el patrón adecuado para «A o B»?

El ternario elige entre dos opciones; && muestra algo o nada.

¿Cómo ordenas una lista sin modificar el original?

sort muta el array; copiarlo primero con spread lo evita.

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio