Textbereiche und Auswahllisten

Andere Felder funktionieren genauso: Der State enthält ihren Wert, sie zeigen ihn an, und onChange ändert ihn. Zwei davon werden in React etwas anders geschrieben als in HTML.

Eine textarea, das Feld für längeren Text, hat in HTML ihren Text zwischen den Tags. In React bekommt sie value, wie ein input, und schließt sich selbst:

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

Auch ein select bekommt value. In HTML wählte das Attribut selected eine Option im Voraus. In React sagt der State, welche Option gewählt ist, als value des select:

const [getraenk, setGetraenk] = useState("kaffee");

return (
    <select value={getraenk} onChange={(event) => setGetraenk(event.target.value)}>
        <option value="tee">Tee</option>
        <option value="kaffee">Kaffee</option>
        <option value="saft">Saft</option>
    </select>
);

Beim Start ist der State "kaffee", also ist Kaffee gewählt. Wählt der Nutzer Tee, ist event.target.value gleich "tee", der value dieser Option, und das kommt in den State.

Die Optionen stammen oft aus Daten. In dieser Übung sind die Tickets ein Array, und das select macht mit map() aus jedem eine option. Der State enthält nur die Id des gewählten Tickets. Um seinen Namen und Preis zu zeigen, suche es im Array, in der Funktion der Komponente vor dem return:

const gewaehlt = tickets.find((ticket) => ticket.id === ticketId);

Bei jedem Rendern wird das Ticket gefunden, das der State nennt, sodass das Ticket unter dem Formular immer zum select passt.