Многострочные поля и выпадающие списки

Остальные поля работают так же: состояние хранит их значение, они его показывают, а onChange его меняет. Два из них в React записываются немного иначе, чем в HTML.

У textarea, поля для длинного текста, в HTML текст лежит между тегами. В React ей, как и input, дают value, и тег закрывается сам:

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

select тоже получает value. В HTML атрибут selected заранее выбирал вариант. В React выбранный вариант определяет состояние, оно становится value у select:

const [drink, setDrink] = useState("coffee");

return (
    <select value={drink} onChange={(event) => setDrink(event.target.value)}>
        <option value="tea">Чай</option>
        <option value="coffee">Кофе</option>
        <option value="juice">Сок</option>
    </select>
);

Когда приложение запускается, состояние равно "coffee", поэтому выбран «Кофе». Когда пользователь выбирает «Чай», event.target.value становится "tea", то есть value этого варианта, и оно попадает в состояние.

Варианты часто берутся из данных. В этом упражнении билеты лежат в массиве, и select делает из каждого option с помощью map(). В состоянии хранится только id выбранного билета. Чтобы показать его название и цену, найдите билет в массиве, в функции компонента перед return:

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

При каждой отрисовке находится билет, который называет состояние, поэтому билет под формой всегда соответствует select.