State: en app som minns

Varför en vanlig variabel inte räcker

På nivå 2 byggde du en räknare genom att själv skriva om knappens text efter varje klick. React gör det annorlunda: du ändrar datan, och React ritar om skärmen. Men du måste lämna över datan till en speciell låda som heter state – annars märker React inte ändringen.

Jag visar: en räknare 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;

Den viktigaste raden – const [count, setCount] = useState(0);:

• useState(0) – “React, sätt upp en låda åt mig med startvärdet 0.”
• count – det aktuella värdet i lådan (skrivskyddat).
• setCount – det enda rätta sättet att ändra värdet. När du anropar setCount(5) sparar React det nya värdet och ritar om överallt count används, på egen hand.

Och onClick={...} är React-versionen av addEventListener("click", ...) – direkt inuti JSX.

Märk vad som inte finns i koden: inget getElementById, inget textContent. Du säger inte hur skärmen ska ändras – du säger vad som är sant nu (count är nu 5), och skärmen ordnar sig själv.

Jag visar: state styr vad som syns

State behöver inte bara vara ett tal. Ett ihopfällbart avsnitt, på React-sätt:

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

Två nya JSX-knep:

• condition ? A : B – kort if/else direkt i HTML: “om det är öppet, visa det här, annars det.”
• condition && (...) – “rendera bara det här om villkoret är sant.” När open är false finns listan helt enkelt inte.

Och !open betyder “motsatsen” – det vänder true till false och tvärtom. En rad = en växel.

Nu är det din tur 💪

Lägg till två saker med state i din app:

1. Ett ihopfällbart avsnitt (ett true/false-state) som passar ditt projekt: 🏫 en ihopfällbar lunchmeny · 🙋 “visa/göm mina toppspel” · 🌍 en ihopfällbar lista med länder · ⚽ en ihopfällbar trupp.
2. En räknare eller en omröstning (ett numeriskt state): 🏫 rösta om klassresan · 🙋 “hur många har hälsat på mig idag” · 🌍 räknare för besökta länder · ⚽ en resultattavla med +1 hemma / +1 borta-knappar (två 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;

Det här tar du med dig från lektionen

• const [value, setValue] = useState(start) – en komponents minne.
• Ändra bara via setValue(...) – React ritar då om på egen hand.
• I JSX: onClick={...}, villkor ? : och && styr vad som syns.

© 2026 Ing. Martin Polak / AlgoRhino · Villkor för innehållsanvändning