Error Messages

Before an app uses what was typed, it checks it, as your sign-up form did in the JavaScript course. In React, an error message is one more piece of state: a text that starts empty. The form's handler checks the fields and sets the message, and the page shows it while it isn't empty:

const [error, setError] = useState("");

function handleSubmit(event) {
    event.preventDefault();
    if (!email.includes("@")) {
        setError("Enter a valid email address.");
        return;
    }
    setError("");
    setSignedUp(true);
}

And in the form, where the message should be:

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

A check that fails sets its message and ends the handler with return, so the rest of it doesn't run, and nothing is sent. Several checks go one after another, each with its own return: the user sees the first problem, fixes it and sends the form again. When every check passes, setError("") takes away the message from the last try.

A message says what to fix. That's why a disabled button isn't always enough: it doesn't say why it's disabled. It's fine for a field that's obviously empty, as in the packing list, but for a rule like "at least 1 ticket", a message is clearer.

Number fields need one more thought: an empty field is Number(""), which is 0, so a check for less than 1 catches it too.