State: en app, der husker

Hvorfor en vanlig variabel ikke er nok

I nivå 2 byggede du en tæller ved selv at omskrive knappens tekst etter hvert klik. React gjør det anderledes: du endrer dataene, og React tegner skjermen om. Men du skal overgive dataene til en speciel boks kalt state – ellers bemærker React ikke endringen.

Jeg viser deg: en tæller i React

import { useState } from 'react';

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

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

export default Counter;

Bryd den vigtigste linje ned – const [count, setCount] = useState(0);:

• useState(0) – “React, sett en boks op for mig med startværdi 0.”
• count – den aktuelle værdi i boksen (skrivebeskyttet).
• setCount – den eneste korrekte måde at endre værdien på. Når du kalder setCount(5), lagrer React den nye værdi og tegner overalt, hvor count brukes, af sig selv.

Og onClick={...} er React-versionen af addEventListener("click", ...) – inde i JSX.

Legg merke til, hva der ikke er i koden: ingen getElementById, ingen textContent. Du siger ikke hvordan skjermen skal endres – du siger hva der er sandt nu (count er nu 5), og skjermen retter sig selv.

Jeg viser deg: state styrer, hva der er synligt

State behøver ikke bare at være et tal. En sammenklappelig sektion, React-måden:

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

To nye JSX-tricks:

• condition ? A : B – forkortet if/else inde i HTML: “hvis den er åben, vis dette, ellers det.”
• condition && (...) – “render kun dette, hvis betingelsen er sand.” Når open er falsk, eksisterer listen simpelthen ikke.

Og !open betyder “det modsatte” – det vender sand til falsk og omvendt. Én linje = en kontakt.

Nå er det din tur 💪

Legg til to ting med state til din app:

1. En sammenklappelig sektion (en true/false-state), der matcher prosjektet ditt: 🏫 en sammenklappelig frokostmenu · 🙋 “vis/skjul mine topspil” · 🌍 en sammenklappelig liste over lande · ⚽ en sammenklappelig trup.
2. En tæller eller en afstemning (en numerisk state): 🏫 stem på klasseturen · 🙋 “hvor mange har hilset på mig i dag” · 🌍 besøkte lande-tæller · ⚽ en resultattavle med +1 hjemme / +1 ude-knapper (to 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;

Dette tar du med deg fra leksjonen

• const [value, setValue] = useState(start) – en komponents minne.
• Endre den kun gjennom setValue(...) – React tegner så om af sig selv.
• I JSX: onClick={...}, betingelser ? : og && styrer, hva der er synligt.

© 2026 Ing. Martin Polak / AlgoRhino · Vilkår for innholdsbruk