State: aplikacija koja pamti

Zašto obična varijabla nije dovoljna

U razini 2 si napravio brojač tako što si sam nakon svakog klika prepisivao tekst gumba. React radi drugačije: mijenjaš podatke, a React ponovno crta ekran. Ali podatke moraš predati posebnoj kutiji zvanoj state – inače React neće primijetiti promjenu.

Pokazat ću ti: brojač u Reactu

import { useState } from 'react';

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

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

export default Counter;

Rastavimo najvažniji redak – const [count, setCount] = useState(0);:

• useState(0) – “React, napravi mi kutiju s početnom vrijednošću 0.”
• count – trenutna vrijednost u kutiji (samo za čitanje).
• setCount – jedini ispravan način promjene vrijednosti. Kad pozoveš setCount(5), React spremi novu vrijednost i sam ponovno nacrta svugdje gdje se count koristi.

A onClick={...} je React verzija addEventListener("click", ...) – izravno unutar JSX-a.

Primijeti što nije u kodu: nema getElementById, nema textContent. Ne govoriš kako promijeniti ekran – govoriš što je sada istina (count je sada 5), a ekran se sam složi.

Pokazat ću ti: state kontrolira što je vidljivo

State ne mora biti samo broj. Sklopivi odjeljak, na React način:

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

Dva nova JSX trika:

• condition ? A : B – skraćeni if/else izravno u HTML-u: “ako je otvoreno, pokaži ovo, inače ono.”
• condition && (...) – “prikaži ovo samo ako je uvjet istinit.” Kad je open false, popis jednostavno ne postoji.

A !open znači “suprotno” – pretvara true u false i obrnuto. Jedan redak = prekidač.

Sad si ti na redu 💪

Dodaj dvije stvari sa stateom u svoju aplikaciju:

1. Sklopivi odjeljak (state true/false) za tvoj projekt: 🏫 sklopivi jelovnik · 🙋 “pokaži/sakrij moje top igre” · 🌍 sklopivi popis zemalja · ⚽ sklopivi popis igrača.
2. Brojač ili glasovanje (brojčani state): 🏫 glasovanje za školski izlet · 🙋 “koliko me ljudi danas pozdravilo” · 🌍 brojač posjećenih zemalja · ⚽ semafor s gumbima +1 domaći / +1 gosti (dva statea!).

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;

Što ćeš ponijeti iz ove lekcije

• const [value, setValue] = useState(start) – memorija komponente.
• Mijenjaj je samo preko setValue(...) – React tada sam ponovno crta.
• U JSX-u: onClick={...}, uvjeti ? : i && kontroliraju što je vidljivo.

© 2026 Ing. Martin Polak / AlgoRhino · Uvjeti korištenja sadržaja