Добавление в список из формы

Формы часто что-то добавляют в список: комментарий, задачу, вещь в рюкзак. Обе половинки этой работы вам уже знакомы. Набранное лежит в состоянии управляемого поля, а в уроке «Состояние» вы видели, как добавить элемент в массив в состоянии: создать новый массив с помощью spread в функции обновления. Обработчик формы соединяет их:

function handleSubmit(event) {
    event.preventDefault();
    setWishes((wishes) => [...wishes, { id: Date.now(), band: band }]);
    setBand("");
}

Это обработчик формы, в которой поклонники предлагают группы на следующий год. Новое пожелание попадает в конец нового массива и получает id для своего key. Date.now() — это число миллисекунд с начала 1970 года, поэтому при каждом добавлении пожелания оно разное, и для id здесь этого достаточно. Потом setBand("") очищает поле, и можно сразу вводить следующую группу. С управляемым полем очистить его — значит просто изменить его состояние.

Пустое пожелание бессмысленно, поэтому пока поле пусто, кнопка не должна работать. Атрибут disabled принимает условие:

<button type="submit" disabled={band.trim() === ""}>
    Предложить
</button>

Пока условие равно true, кнопка отключена: она выглядит бледнее, а щелчок по ней ничего не делает. Если в поле одни пробелы, trim() даёт "", и кнопка остаётся отключённой. Форму с отключённой кнопкой отправки нельзя отправить и клавишей Enter. А поскольку при каждой отрисовке условие вычисляется заново из состояния, кнопка оживает с первой же набранной буквой.