State: aplikacja, która pamięta

Dlaczego zwykła zmienna nie wystarczy

Na poziomie 2 zbudowałeś licznik, sam przepisując tekst przycisku po każdym kliknięciu. React robi to inaczej: zmieniasz dane, a React przerysowuje ekran. Ale dane musisz oddać do specjalnego pudełka zwanego state – inaczej React zmiany nie zauważy.

Pokażę ci: licznik w Reactcie

import { useState } from 'react';

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

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

export default Counter;

Rozbijmy najważniejszą linię – const [count, setCount] = useState(0);:

• useState(0) – „React, załóż mi pudełko z wartością startową 0.”
• count – aktualna wartość w pudełku (tylko do odczytu).
• setCount – jedyny poprawny sposób zmiany wartości. Kiedy wywołasz setCount(5), React zapisze nową wartość i sam przerysuje wszędzie, gdzie używasz count.

A onClick={...} to reactowa wersja addEventListener("click", ...) – od razu w JSX.

Zauważ, czego w kodzie nie ma: żadnego getElementById, żadnego textContent. Nie mówisz jak zmienić ekran – mówisz co jest teraz prawdą (count ma teraz 5), a ekran sam się dopasowuje.

Pokażę ci: state steruje tym, co widać

State nie musi być tylko liczbą. Zwijana sekcja po reactowemu:

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

Dwa nowe triki JSX:

• condition ? A : B – skrót if/else od razu w HTML: „jeśli otwarte, pokaż to, inaczej tamto.”
• condition && (...) – „renderuj to tylko, jeśli warunek jest prawdziwy.” Kiedy open jest false, lista po prostu nie istnieje.

A !open znaczy „przeciwieństwo” – zamienia true na false i odwrotnie. Jedna linia = przełącznik.

Teraz ty 💪

Dodaj do aplikacji dwie rzeczy ze state:

1. Zwijaną sekcję (state true/false) pasującą do projektu: 🏫 zwijane menu stołówki · 🙋 „pokaż/ukryj moje ulubione gry” · 🌍 zwijana lista krajów · ⚽ zwijana lista zawodników.
2. Licznik albo głosowanie (state liczbowy): 🏫 głosowanie na wycieczkę klasową · 🙋 „ilu ludzi mnie dziś przywitało” · 🌍 licznik odwiedzonych krajów · ⚽ tablica wyników z przyciskami +1 home / +1 away (dwa stany!).

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;

Co wyniesiesz z tej lekcji

• const [value, setValue] = useState(start) – pamięć komponentu.
• Zmieniaj tylko przez setValue(...) – React potem sam przerysuje.
• W JSX: onClick={...}, warunki ? : i && sterują tym, co widać.

© 2026 Ing. Martin Polak / AlgoRhino · Warunki korzystania z treści