State: una app que recuerda

Por qué una variable normal no basta

En el Nivel 2, construiste un contador reescribiendo tú el texto del botón tras cada clic. React lo hace distinto: cambias los datos, y React redibuja la pantalla. Pero tienes que entregar los datos en una caja especial llamada state – si no, React no notará el cambio.

Te lo muestro: un contador en React

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked: {count}×
    </button>
  );
}

export default Counter;

Desglosando la línea más importante – const [count, setCount] = useState(0);:

• useState(0) – “React, prepárame una caja con valor inicial 0.”
• count – el valor actual en la caja (solo lectura).
• setCount – la única forma correcta de cambiar el valor. Cuando llamas setCount(5), React guarda el nuevo valor y redibuja solo donde se usa count.

Y onClick={...} es la versión React de addEventListener("click", ...) – directamente dentro del JSX.

Fíjate en lo que no hay en el código: ni getElementById, ni textContent. No dices cómo cambiar la pantalla – dices qué es verdad ahora (count es ahora 5), y la pantalla se alinea sola.

Te lo muestro: el state controla qué se ve

El state no tiene que ser solo un número. Una sección plegable, al estilo React:

import { useState } from 'react';

function Menu() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(!open)}>
        {open ? "Hide the menu ▲" : "Show the menu ▼"}
      </button>

      {open && (
        <ul>
          <li>Monday: tomato soup with pasta</li>
          <li>Tuesday: chicken with rice</li>
          <li>Wednesday: pancakes with jam</li>
        </ul>
      )}
    </div>
  );
}

Dos trucos nuevos de JSX:

• condition ? A : B – if/else abreviado dentro del HTML: “si está abierto, muestra esto, si no, aquello.”
• condition && (...) – “solo renderiza esto si la condición es verdadera.” Cuando open es false, la lista simplemente no existe.

Y !open significa “lo contrario” – convierte true en false y al revés. Una línea = un interruptor.

Ahora tú 💪

Añade dos cosas con state a tu app:

1. Una sección plegable (un state true/false) acorde a tu proyecto: 🏫 un menú del comedor plegable · 🙋 “mostrar/ocultar mis mejores juegos” · 🌍 una lista de países plegable · ⚽ una plantilla plegable.
2. Un contador o una votación (state numérico): 🏫 votar el viaje de clase · 🙋 “cuánta gente me saludó hoy” · 🌍 contador de países visitados · ⚽ un marcador con botones +1 home / +1 away (¡dos states!).

import { useState } from 'react';

function Score() {
  const [home, setHome] = useState(0);
  const [away, setAway] = useState(0);

  return (
    <div className="card">
      <h3>Riverside {home} : {away} Lakeside</h3>
      <button onClick={() => setHome(home + 1)}>Home goal ⚽</button>
      <button onClick={() => setAway(away + 1)}>Away goal 😤</button>
      <button onClick={() => { setHome(0); setAway(0); }}>New match</button>
    </div>
  );
}

export default Score;

Lo que te llevas de esta lección

• const [value, setValue] = useState(start) – la memoria de un componente.
• Cámbialo solo con setValue(...) – React redibuja solo.
• En JSX: onClick={...}, condiciones ? : y && controlan qué se ve.

© 2026 Ing. Martin Polak / AlgoRhino · Condiciones de uso del contenido