Proměnná nestačí

Zatím obsluhy jen vypisovaly. Teď zařídíme, aby kliknutí změnilo stránku: tlačítko, které počítá lajky. S tím, co znáte, byste číslo uložili do proměnné a v obsluze ho zvětšili:

export default function App() {
    let lajky = 0;

    function pridejLajk() {
        lajky = lajky + 1;
        console.log(lajky);
    }

    return (
        <main>
            <h1>Sový sbor</h1>
            <p>♥ {lajky}</p>
            <button onClick={pridejLajk}>Líbí se mi</button>
        </main>
    );
}

Klikněte třikrát a konzole počítá:

1
2
3

Stránka ale pořád ukazuje ♥ 0. Proč? React komponentu vykreslil jednou: zavolal App(), funkce vrátila JSX, ve kterém bylo lajky rovno 0, a z něj React udělal stránku. Pak se proměnná změnila, ale Reactu to nikdo neřekl. React vaše proměnné nesleduje a stránka se sama od sebe nezmění. V kurzu JavaScriptu byste teď sami nastavili textContent. V Reactu na stránku nesaháte: React ji vytváří z komponent.

A ani kdyby React zavolal App() znovu, nepomohlo by to. Funkce by běžela od začátku a let lajky = 0; by zase vytvořilo novou proměnnou s nulou. Proměnná v komponentě žije, jen dokud funkce běží, tedy po dobu jednoho vykreslení.

Komponenta tedy potřebuje dvě věci, které jí proměnná dát neumí:

• hodnotu, kterou si React pamatuje od jednoho vykreslení k dalšímu,
• a způsob, jak Reactu říct, že se hodnota změnila, aby komponentu vykreslil znovu.

To je stav a o něm je další lekce. Nejdřív si ale problém vyzkoušejte sami.