Einträge über ein Formular hinzufügen

Formulare fügen oft etwas zu einer Liste hinzu: einen Kommentar, eine Aufgabe, etwas zum Einpacken. Beide Hälften kennst du schon. Was getippt wird, steht im State eines kontrollierten Feldes, und die Lektion State hat dir gezeigt, wie du etwas zu einem Array im State hinzufügst: mit einem neuen Array, das du in einer Updater-Funktion mit Spread erzeugst. Der Handler des Formulars bringt beides zusammen:

function absenden(event) {
    event.preventDefault();
    setWuensche((wuensche) => [...wuensche, { id: Date.now(), band: band }]);
    setBand("");
}

Das stammt aus einem Formular, in dem Fans Bands für nächstes Jahr vorschlagen. Der neue Wunsch kommt ans Ende eines neuen Arrays und bekommt eine Id für seinen key. Date.now() ist die Zahl der Millisekunden seit Beginn des Jahres 1970, also jedes Mal eine andere Zahl, wenn jemand einen Wunsch hinzufügt, was als Id hier gut genug ist. Dann leert setBand("") das Feld, damit die nächste Band gleich getippt werden kann. Bei einem kontrollierten Feld ist das Leeren nur eine Änderung seines States.

Ein leerer Wunsch ergibt keinen Sinn, also soll der Button nicht funktionieren, solange das Feld leer ist. Das Attribut disabled nimmt eine Bedingung:

<button type="submit" disabled={band.trim() === ""}>
    Vorschlagen
</button>

Solange die Bedingung true ist, ist der Button deaktiviert: Er sieht blasser aus, und ein Klick tut nichts. Stehen im Feld nur Leerzeichen, ergibt trim() den Wert "", er bleibt also deaktiviert. Ein Formular, dessen Absende-Button deaktiviert ist, lässt sich auch mit der Eingabetaste nicht absenden. Und weil jedes Rendern die Bedingung aus dem State neu berechnet, wird der Button mit dem ersten getippten Buchstaben wieder bedienbar.