Delší text a rozbalovací seznamy

Ostatní prvky formuláře fungují stejně: jejich hodnota je ve stavu, prvek ji ukazuje a onChange ji mění. Dva z nich se ale v Reactu píšou trochu jinak než v HTML.

textarea, textové pole na delší text, má v HTML svůj text mezi tagy. V Reactu dostane value stejně jako input a uzavře se sám:

<textarea
    id="poznamka"
    value={poznamka}
    onChange={(event) => setPoznamka(event.target.value)}
/>

I select dostane value. V HTML vybral možnost předem atribut selected. V Reactu o vybrané možnosti rozhoduje stav: je to value prvku select:

const [napoj, setNapoj] = useState("kava");

return (
    <select value={napoj} onChange={(event) => setNapoj(event.target.value)}>
        <option value="caj">Čaj</option>
        <option value="kava">Káva</option>
        <option value="dzus">Džus</option>
    </select>
);

Když se aplikace spustí, je ve stavu "kava", takže je vybraná Káva. Když uživatel vybere Čaj, je event.target.value rovno "caj", hodnotě value té možnosti, a to se uloží do stavu.

Možnosti často pocházejí z dat. V tomto cvičení jsou vstupenky v poli a select z každé udělá pomocí map() jednu option. Stav si drží jen id vybrané vstupenky. Abyste ukázali její název a cenu, najděte ji v poli, ve funkci komponenty před return:

const vybrana = vstupenky.find((vstupenka) => vstupenka.id === druh);

Každé vykreslení najde vstupenku, kterou určuje stav, takže vstupenka pod formulářem vždy odpovídá tomu, co je vybrané v select.