Ejercicio: Estado con useState

⏱ 25 minutos
📶 Nivel: principiante

Objetivo

Crear un Contador con estado propio, tres botones y dos copias independientes.

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";

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

Resultado

Consola

Pasos

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

Crea un componente Contador con un estado numérico que empiece en 0.
Muestra el valor en un <strong className="cuenta">.
Añade tres botones: Sumar (+1), Restar (-1, sin bajar de 0) y Reiniciar (vuelve a 0).
Usa <Contador /> dos veces dentro de App (cada uno debe tener su propio valor).
Usa la forma funcional (n => …) al sumar y restar.

💡 Pista 1: no bajar de cero

Al restar usa setN(n => Math.max(0, n - 1)).

💡 Pista 2: botones

Escribe el texto exacto de cada botón («Sumar», «Restar», «Reiniciar») para que el comprobador los encuentre.

🔎 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";

function Contador() {
  const [n, setN] = useState(0);
  return (
    <section>
      <strong className="cuenta">{n}</strong>
      <button onClick={() => setN(n => n + 1)}>Sumar</button>
      <button onClick={() => setN(n => Math.max(0, n - 1))}>Restar</button>
      <button onClick={() => setN(0)}>Reiniciar</button>
    </section>
  );
}

export default function App() {
  return (
    <main>
      <Contador />
      <Contador />
    </main>
  );
}

💡 🏁 Reto extra (opcional)

Añade un campo «Paso»: un número en estado (1, 5 o 10) que cambia cuánto suman y restan los botones.