Chybové zprávy

Než aplikace použije, co uživatel napsal, zkontroluje to, stejně jako to dělal váš registrační formulář v kurzu JavaScriptu. V Reactu je chybová zpráva další stavová proměnná: text, který začíná prázdný. Obsluha formuláře údaje zkontroluje a zprávu nastaví. Stránka ji ukazuje, dokud není prázdná:

const [chyba, setChyba] = useState("");

function prihlas(event) {
    event.preventDefault();
    if (!email.includes("@")) {
        setChyba("Zadejte platnou e-mailovou adresu.");
        return;
    }
    setChyba("");
    setPrihlaseno(true);
}

A ve formuláři, tam, kde má zpráva být:

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

Kontrola, která neprojde, nastaví svou zprávu a obsluhu ukončí pomocí return, takže zbytek obsluhy neproběhne a nic se neodešle. Víc kontrol jde po sobě, každá se svým return: uživatel uvidí první problém, opraví ho a formulář odešle znovu. Když projdou všechny kontroly, setChyba("") odstraní zprávu z minulého pokusu.

Zpráva říká, co opravit. Proto vypnuté tlačítko nestačí vždycky: neřekne, proč je vypnuté. Hodí se tam, kde je problém vidět na první pohled, třeba u prázdného textového pole v seznamu věcí. U pravidla jako „aspoň 1 vstupenka“ je zpráva srozumitelnější.

U textových polí pro čísla ještě jedna věc: z prázdného textového pole udělá Number("") nulu, takže ho kontrola na méně než 1 zachytí taky.