Your Own Words
Twelve words are a good start, but you'll want to learn your own, too. The app gets a form for them, a component of its own in WordForm.jsx. Its JSX is ready: a heading, two text fields and a button. You'll bring it to life.
The fields are controlled, as in the Forms lesson: what they hold lives in the states spanish and english, and onChange puts every change there. When the form is submitted (with the Add button or Enter), handleSubmit runs. First, with event.preventDefault(), it stops the browser from sending the form the old way and loading the page again.
But where does the new word go? The words are state in App, and only App can change them. So App gives the form a function in its props, onAdd, and the form calls it with the new word, as in the Sharing State lesson:
onAdd({
id: Date.now(),
spanish: spanish.trim(),
english: english.trim(),
});Every card needs its own id, also for its key. Date.now() gives one, as in the Forms lesson: the number of milliseconds since the start of 1970 is different every time you add a word. trim() removes spaces from the start and the end, in case you type one by mistake.
In App, handleAdd(newWord) makes a new array of words with the new one at the end: setWords((words) => [...words, newWord]). The deck then has thirteen cards, and the position and the score count the new one by themselves.
The form should also check what you've typed: a card without a word or without its translation is no use. When a field is empty, the form adds nothing and says what's wrong instead, in a state of its own, error.
Instructions
In WordForm.jsx, add the states spanish and english (empty texts at first) and make the two fields controlled with value and onChange. Give the form onSubmit={handleSubmit}. handleSubmit(event) calls event.preventDefault() and then onAdd() with the new word, as above. In App.jsx, import WordForm, show <WordForm onAdd={handleAdd} /> under the buttons, and write handleAdd(newWord), which adds the word to the end of words. Add el sol with the translation sun: the position shows 1 / 13.
After adding the word, empty both fields in handleSubmit, so that you can type the next word right away.
If a field is empty or has only spaces (spanish.trim() === ""), add nothing: put Fill in both the Spanish and the English word. into a new state error and end handleSubmit with return. Under the button, show <p className="error">{error}</p> when error isn't empty. When a word is added, empty error too, so that the message disappears.