Tila: sovellus joka muistaa

Miksi tavallinen muuttuja ei riitä

Tasolla 2 rakensit laskurin kirjoittamalla painikkeen tekstin uudelleen jokaisen klikkauksen jälkeen. React tekee sen eri tavalla: muutat dataa, ja React piirtää näytön uudelleen. Mutta sinun pitää antaa data erityiseen laatikkoon nimeltä tila – muuten React ei huomaa muutosta.

Näytän sinulle: laskuri Reactissa

import { useState } from 'react';

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

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

export default Counter;

Puretaan tärkein rivi – const [count, setCount] = useState(0);:

• useState(0) – “React, luo minulle laatikko alkuarvolla 0.”
• count – nykyinen arvo laatikossa (vain luettavissa).
• setCount – ainoa oikea tapa muuttaa arvoa. Kun kutsut setCount(5), React tallentaa uuden arvon ja piirtää uudelleen kaikkialla missä count käytetään, itsestään.

Ja onClick={...} on React-versio addEventListener("click", ...):sta – suoraan JSX:ssä.

Huomaa mitä koodissa ei ole: ei getElementById:ä, ei textContent:ia. Et sano miten näyttöä muutetaan – sanot mikä on nyt totta (count on nyt 5), ja näyttö järjestäytyy itsestään.

Näytän sinulle: tila ohjaa mitä näkyy

Tilan ei tarvitse olla vain numero. Taittuva osio, React-tavalla:

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

Kaksi uutta JSX-temppua:

• ehto ? A : B – lyhyt if/else suoraan HTML:ssä: “jos auki, näytä tämä, muuten tuo.”
• ehto && (...) – “renderöi tämä vain jos ehto on tosi.” Kun open on false, listaa ei yksinkertaisesti ole.

Ja !open tarkoittaa “päinvastainen” – se muuttaa true:n false:ksi ja päinvastoin. Yksi rivi = kytkin.

Nyt sinun vuorosi 💪

Lisää sovellukseesi kaksi asiaa tilalla:

1. Taittuva osio (true/false-tila) joka sopii projektiisi: 🏫 taittuva ruokalista · 🙋 “näytä/piilota suosikkipelini” · 🌍 taittuva maiden lista · ⚽ taittuva pelaajalista.
2. Laskuri tai äänestys (numeerinen tila): 🏫 äänestys luokkaretkestä · 🙋 “montako ihmistä tervehti minua tänään” · 🌍 käytyjen maiden laskuri · ⚽ tulostaulu +1 koti / +1 vieras -painikkeilla (kaksi tilaa!).

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;

Mitä opit tästä oppitunnista

• const [arvo, setArvo] = useState(alku) – komponentin muisti.
• Muuta sitä vain setArvo(...):lla – React piirtää sitten uudelleen itsestään.
• JSX:ssä: onClick={...}, ehdot ? : ja && ohjaavat mitä näkyy.

© 2026 Ing. Martin Polak / AlgoRhino · Sisällön käyttöehdot