Ejercicio: Listas, claves y renderizado condicional

⏱ 30 minutos
📶 Nivel: principiante

Objetivo

Dibujar una lista de tareas con claves, clases condicionales, un contador de pendientes y un filtro.

Cómo se trabaja

Escribe un componente llamado App (puedes crear los demás que necesites). Prueba tu código en el editor de abajo; cuando funcione, pega todo el archivo en el comprobador. Los import de react se aceptan y se ignoran, porque aquí React ya está cargado.

⚛️ Tu editor de React (empieza desde aquí)

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 },
  { id: 5, texto: "Hacer el ejercicio", hecha: false },
];

function App() {
  return <h1>Mis tareas</h1>;
}

Resultado

Consola

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

Dibuja la lista tareas en un <ul> con un <li> por cada tarea; usa key={t.id}.
Si una tarea está hecha, su <li> debe tener la clase hecha.
Muestra un <p className="resumen"> con el texto «Pendientes: N», donde N es cuántas tareas no están hechas.
Añade un botón «Solo pendientes» que alterne un estado y, cuando está activo, muestre únicamente las pendientes.
Si no hay ninguna tarea visible, muestra un <p className="vacio"> con «No hay tareas».

💡 Pista 1: valores derivados

Calcula pendientes = tareas.filter(t => !t.hecha).length y visibles antes del return. No guardes eso en estado.

💡 Pista 2: la clase

Usa className={t.hecha ? "hecha" : ""} en el <li>.

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

Tu código de React (el archivo App.jsx completo)

✅ Ver una solución posible

Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

App.jsx

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 },
  { id: 5, texto: "Hacer el ejercicio", hecha: false },
];

export default function App() {
  const [soloPendientes, setSoloPendientes] = useState(false);
  const pendientes = tareas.filter((t) => !t.hecha).length;
  const visibles = soloPendientes ? tareas.filter((t) => !t.hecha) : tareas;

  return (
    <main>
      <p className="resumen">Pendientes: {pendientes}</p>
      <button onClick={() => setSoloPendientes(!soloPendientes)}>Solo pendientes</button>
      {visibles.length === 0 ? (
        <p className="vacio">No hay tareas</p>
      ) : (
        <ul>
          {visibles.map((t) => (
            <li key={t.id} className={t.hecha ? "hecha" : ""}>{t.texto}</li>
          ))}
        </ul>
      )}
    </main>
  );
}

💡 🏁 Reto extra (opcional)

Haz que al pulsar sobre una tarea se marque como hecha o pendiente (guarda las tareas en estado y actualízalas con map).