Fehlermeldungen

Bevor eine App verwendet, was getippt wurde, prüft sie es, so wie dein Anmeldeformular im JavaScript-Kurs. In React ist eine Fehlermeldung ein weiteres Stück State: ein Text, der leer beginnt. Der Handler des Formulars prüft die Felder und setzt die Meldung, und die Seite zeigt sie an, solange sie nicht leer ist:

const [fehler, setFehler] = useState("");

function absenden(event) {
    event.preventDefault();
    if (!email.includes("@")) {
        setFehler("Gib eine gültige E-Mail-Adresse ein.");
        return;
    }
    setFehler("");
    setAngemeldet(true);
}

Und im Formular, an der Stelle, wo die Meldung stehen soll:

{fehler !== "" && <p className="fehler">{fehler}</p>}

Eine Prüfung, die fehlschlägt, setzt ihre Meldung und beendet den Handler mit return, sodass der Rest nicht läuft und nichts gesendet wird. Mehrere Prüfungen stehen nacheinander, jede mit ihrem eigenen return: Der Nutzer sieht das erste Problem, behebt es und sendet das Formular erneut. Bestehen alle Prüfungen, nimmt setFehler("") die Meldung vom letzten Versuch weg.

Eine Meldung sagt, was zu korrigieren ist. Deshalb reicht ein deaktivierter Button nicht immer: Er sagt nicht, warum er deaktiviert ist. Bei einem offensichtlich leeren Feld wie in der Packliste ist das in Ordnung, aber bei einer Regel wie „mindestens 1 Ticket“ ist eine Meldung klarer.

Zahlenfelder brauchen noch einen Gedanken: Ein leeres Feld ist Number(""), also 0, sodass eine Prüfung auf weniger als 1 es ebenfalls erfasst.