Každá karta má svůj stav

Kde si React stav pamatuje? Ve funkci ne, ta při každém vykreslení běží znovu. React si ho pamatuje pro komponentu na jejím místě na stránce. Když je komponenta použitá třikrát, má každá z těch tří vlastní stav.

Tady je KartaKapely s tlačítkem na lajky, ve vlastním souboru:

import { useState } from "react";

export default function KartaKapely({ nazev }) {
    const [lajky, setLajky] = useState(0);

    return (
        <li className="karta">
            <h2>{nazev}</h2>
            <button onClick={() => setLajky(lajky + 1)}>♥ {lajky}</button>
        </li>
    );
}

A App ukáže tři takové karty:

<ul>
    <KartaKapely nazev="Noční vlaky" />
    <KartaKapely nazev="Měsíční kočky" />
    <KartaKapely nazev="Sový sbor" />
</ul>

Klikněte dvakrát na srdíčko Měsíčních koček a ♥ 2 ukáže jen jejich karta. Další dvě mají pořád ♥ 0. Každá KartaKapely má vlastní lajky, i když všechny vznikly ze stejné funkce, stejně jako se tři kopie jednoho formuláře vyplňují každá zvlášť. (Obsluha je tu jen jeden krátký řádek, a tak je napsaná rovnou v JSX.)

Když karty vznikají pomocí map(), rozezná je React podle jejich key. To je další důvod pro klíče z id: když se seznam změní, každé kapele zůstanou její lajky.

Stav patří jen své komponentě. App neví, kolik lajků má která karta, a karty nevědí jedna o druhé. Co kdyby App čísla potřebovala, třeba aby ukázala všechny lajky dohromady? Pak by se stav musel přesunout výš, do App. O tom je lekce Sdílený stav, dál v kurzu.