State: un'app che ricorda

Perché una variabile normale non basta

Al Livello 2, hai costruito un contatore riscrivendo da solo il testo del pulsante dopo ogni clic. React fa diversamente: cambi i dati, e React ridisegna lo schermo. Ma devi consegnare i dati a una scatola speciale chiamata state – altrimenti React non nota il cambiamento.

Te lo mostro: un contatore in React

import { useState } from 'react';

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

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

export default Counter;

Analizziamo la riga più importante – const [count, setCount] = useState(0);:

• useState(0) – “React, prepara una scatola per me con valore iniziale 0.”
• count – il valore attuale nella scatola (solo lettura).
• setCount – l’unico modo corretto di cambiare il valore. Quando chiami setCount(5), React salva il nuovo valore e ridisegna ovunque si usi count, da solo.

E onClick={...} è la versione React di addEventListener("click", ...) – direttamente dentro JSX.

Nota cosa non c’è nel codice: niente getElementById, niente textContent. Non dici come cambiare lo schermo – dici cosa è vero adesso (count è ora 5), e lo schermo si allinea da solo.

Te lo mostro: lo state controlla cosa è visibile

Lo state non deve essere solo un numero. Una sezione espandibile, stile 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>
  );
}

Due trucchi JSX nuovi:

• condition ? A : B – if/else abbreviato direttamente nell’HTML: “se è aperto, mostra questo, altrimenti quello.”
• condition && (...) – “renderizza questo solo se la condizione è vera.” Quando open è false, la lista semplicemente non esiste.

E !open significa “l’opposto” – trasforma true in false e viceversa. Una riga = un interruttore.

Ora tocca a te 💪

Aggiungi due cose con lo state alla tua app:

1. Una sezione espandibile (uno state true/false) adatta al tuo progetto: 🏫 un menu mensa espandibile · 🙋 “mostra/nascondi i miei giochi preferiti” · 🌍 una lista di paesi espandibile · ⚽ una rosa espandibile.
2. Un contatore o un voto (state numerico): 🏫 voto per la gita scolastica · 🙋 “quante persone mi hanno salutato oggi” · 🌍 contatore paesi visitati · ⚽ un tabellone con pulsanti +1 casa / +1 ospiti (due state!).

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;

Cosa porti via da questa lezione

• const [value, setValue] = useState(start) – la memoria di un componente.
• Cambialo solo con setValue(...) – React ridisegna da solo.
• In JSX: onClick={...}, condizioni ? : e && controllano cosa è visibile.

© 2026 Ing. Martin Polak / AlgoRhino · Condizioni d'uso dei contenuti