State: een app die zich herinnert

Leer useState – het geheugen van een component. Je app begint op klikken te reageren op de React-manier.

Waarom een gewone variabele niet genoeg is

In Level 2 bouwde je een teller door na elke klik zelf de tekst van de knop te herschrijven. React doet het anders: je verandert de data, en React tekent het scherm opnieuw. Maar je moet de data aan een speciale doos geven die state heet – anders merkt React de verandering niet.

Ik laat je zien: een teller 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;

De belangrijkste regel uit elkaar – const [count, setCount] = useState(0);:

useState(0) – “React, zet een doos voor me klaar met startwaarde 0.”
count – de huidige waarde in de doos (alleen-lezen).
setCount – de enige juiste manier om de waarde te veranderen. Als je setCount(5) aanroept, slaat React de nieuwe waarde op en tekent overal waar count wordt gebruikt opnieuw.

En onClick={...} is de React-versie van addEventListener("click", ...) – direct in JSX.

Let op wat niet in de code staat: geen getElementById, geen textContent. Je zegt niet hoe het scherm moet veranderen – je zegt wat nu waar is (count is nu 5), en het scherm past zich vanzelf aan.

Ik laat je zien: state bepaalt wat zichtbaar is

State hoeft niet alleen een getal te zijn. Een inklapbare sectie, op de React-manier:

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>
  );
}

Twee nieuwe JSX-trucs:

condition ? A : B – korte if/else in HTML: “als open, toon dit, anders dat.”
condition && (...) – “render dit alleen als de voorwaarde waar is.” Als open false is, bestaat de lijst simpelweg niet.

En !open betekent “het tegenovergestelde” – true wordt false en omgekeerd. Eén regel = een schakelaar.

Nu jij 💪

Voeg twee dingen met state toe aan je app:

Een inklapbare sectie (een true/false-state) die bij je project past: 🏫 een inklapbaar lunchmenu · 🙋 “toon/verberg mijn topgames” · 🌍 een inklapbare landenlijst · ⚽ een inklapbare selectie.
Een teller of stem (een numerieke state): 🏫 stem op de klassenreis · 🙋 “hoeveel mensen begroetten me vandaag” · 🌍 teller van bezochte landen · ⚽ een scorebord met +1 thuis / +1 uit-knoppen (twee states!).

Bonusoplossing: scorebord met twee 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;

Een component kan zoveel dozen hebben als hij wil – elke useState is er één.

✅

Controleer jezelf: Je app heeft minstens twee interactieve plekken, en nergens in de code staat getElementById. Als je deze mentale verschuiving beheerst (“ik verander de data, niet het scherm”), heb je het moeilijkste deel van React onder de knie.

Wat neem je mee uit deze les

const [value, setValue] = useState(start) – het geheugen van een component.
Verander alleen via setValue(...) – React tekent dan vanzelf opnieuw.
In JSX: onClick={...}, voorwaarden ? : en && bepalen wat zichtbaar is.