Сообщения об ошибках

Прежде чем приложение воспользуется набранным, оно проверяет это, как делала ваша форма регистрации в курсе JavaScript. В React сообщение об ошибке — ещё одна часть состояния: текст, который сначала пуст. Обработчик формы проверяет поля и записывает сообщение, а страница показывает его, пока оно не пусто:

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

function handleSubmit(event) {
    event.preventDefault();
    if (!email.includes("@")) {
        setError("Введите корректный адрес электронной почты.");
        return;
    }
    setError("");
    setSignedUp(true);
}

А в форме, там, где должно быть сообщение:

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

Проверка, которая не прошла, записывает своё сообщение и завершает обработчик через return, поэтому остальной код не выполняется и ничего не отправляется. Несколько проверок идут одна за другой, у каждой свой return: пользователь видит первую проблему, исправляет её и отправляет форму снова. Когда все проверки пройдены, setError("") убирает сообщение с прошлой попытки.

Сообщение говорит, что исправить. Поэтому отключённой кнопки не всегда достаточно: она не объясняет, почему отключена. Для явно пустого поля, как в списке вещей, этого хватает, а для правила вроде «хотя бы 1 билет» сообщение понятнее.

С числовыми полями нужно подумать ещё об одном: пустое поле — это Number(""), то есть 0, поэтому проверка «меньше 1» ловит и его.