Свои слова

Двенадцать слов — хорошее начало, но вам захочется учить и свои. В приложении появится форма для них — отдельный компонент в WordForm.jsx. Её JSX уже готов: заголовок, два текстовых поля и кнопка. Вы оживите её.

Поля управляемые, как в уроке «Формы»: то, что в них написано, хранится в состояниях spanish и russian, а onChange записывает туда каждое изменение. Когда форма отправляется (кнопкой «Добавить» или клавишей Enter), срабатывает handleSubmit. Сначала он с помощью event.preventDefault() не даёт браузеру отправить форму по-старому и перезагрузить страницу.

Но куда попадает новое слово? Слова — это состояние в App, и менять его может только App. Поэтому App передаёт форме функцию в пропсах, onAdd, а форма вызывает её с новым словом, как в уроке «Общее состояние»:

onAdd({
    id: Date.now(),
    spanish: spanish.trim(),
    russian: russian.trim(),
});

Каждой карточке нужен собственный id, в том числе для ключа. Его даёт Date.now(), как в уроке «Формы»: число миллисекунд с начала 1970 года каждый раз разное, когда вы добавляете слово. trim() убирает пробелы в начале и в конце, если вы случайно их напечатали.

В App функция handleAdd(newWord) создаёт новый массив слов с новым словом в конце: setWords((words) => [...words, newWord]). В колоде становится тринадцать карточек, а позиция и счёт учитывают новую сами.

Форма должна ещё и проверять, что вы напечатали: карточка без слова или без перевода никому не нужна. Если поле пустое, форма ничего не добавляет, а вместо этого говорит, что не так, через собственное состояние error.