Přidání do pole

Stav může držet i pole. Tady je „Můj program“, kapely, které si nechcete nechat ujít. Stav si pamatuje jejich id a začíná jako prázdné pole:

const [program, setProgram] = useState([]);

Při přidávání kapely by vás mohlo napadnout push(). Nedělejte to. push() změní pole, které si pamatuje React, a React si toho nevšimne: změnu pozná, jen když funkce set… dostane jinou hodnotu, než stav měl, a stejné pole, i s jednou položkou navíc, jiná hodnota není. Hodnotu, která je ve stavu, tedy nikdy neměňte. Vytvořte nové pole a to předejte funkci set….

Nové pole vytvoří tři tečky z kurzu JavaScriptu: [...program, id] je nové pole se vším, co je v program, a s id na konci. Vzniká ze starého pole, a proto patří do aktualizační funkce:

function pridej(id) {
    setProgram((program) => [...program, id]);
}

Program ukážete tak, že při vykreslování najdete kapely, jejichž id v něm jsou:

const mojeKapely = kapely.filter((kapela) => program.includes(kapela.id));

<ul className="program">
    {mojeKapely.map((kapela) => (
        <li key={kapela.id}>{kapela.nazev}</li>
    ))}
</ul>

Proč id, a ne celé objekty kapel? Údaje o kapelách zůstanou na jednom místě, v kapely, a stav drží jen to, co si návštěvník vybral. Při každém vykreslení to filter() spojí dohromady.