Eigene Wörter

Zwölf Wörter sind ein guter Anfang, aber du willst bestimmt auch eigene lernen. Die App bekommt dafür ein Formular, eine eigene Komponente in WortFormular.jsx. Ihr JSX ist fertig: eine Überschrift, zwei Textfelder und ein Button. Du erweckst es zum Leben.

Die Felder sind kontrolliert, wie in der Lektion über Formulare: Was sie enthalten, steckt in den States englisch und deutsch, und onChange legt jede Änderung dort ab. Wird das Formular abgeschickt (mit dem Button Hinzufügen oder mit Enter), läuft abschicken. Zuerst hindert es den Browser mit event.preventDefault() daran, das Formular auf die alte Art zu senden und die Seite neu zu laden.

Aber wohin kommt das neue Wort? Die Wörter sind State in App, und nur App kann sie ändern. Also gibt App dem Formular in den Props eine Funktion, onHinzufuegen, und das Formular ruft sie mit dem neuen Wort auf, wie in der Lektion über das Teilen von State:

onHinzufuegen({
    id: Date.now(),
    englisch: englisch.trim(),
    deutsch: deutsch.trim(),
});

Jede Karte braucht ihre eigene id, auch für ihren Key. Date.now() liefert eine, wie in der Lektion über Formulare: Die Zahl der Millisekunden seit dem Beginn des Jahres 1970 ist jedes Mal anders, wenn du ein Wort hinzufügst. trim() entfernt Leerzeichen am Anfang und am Ende, falls du aus Versehen eins tippst.

In App erzeugt hinzufuegen(neuesWort) ein neues Array von Wörtern mit dem neuen am Ende: setWoerter((woerter) => [...woerter, neuesWort]). Der Stapel hat dann dreizehn Karten, und die Position und der Punktestand zählen die neue von selbst mit.

Das Formular soll auch prüfen, was du eingetippt hast: Eine Karte ohne Wort oder ohne Übersetzung nützt nichts. Ist ein Feld leer, fügt das Formular nichts hinzu und sagt stattdessen, was nicht stimmt, in einem eigenen State, fehler.