How to force useState hook to change the state inside the closure?

Question

I have two parameters on the form : login and password.

When sending data from the form, the function is called:

const onRegister = (e) =>{
        e.preventDefault();
        validate();
        if (!loginError && !pwdError){
            const userData = {
                username: login,
                password: password,
            };
            axios.post("http://localhost:8080/api/auth/register", userData)
                .then(() => {
                    navigate("/auth",{ state: { previousUrl: location.pathname } });
                })
                .catch(error => {   
                    setFieldError(error.response.data)
            })
        }   
    };

The first thing I want to do is validate the entered data:

const validate = () =>{

        if (!validLogin.test(login)) {
            setLoginError(true);
            console.log("after login err = ")
            console.log(loginError)
        }  
        if (!validPassword.test(password)) {
            setPwdError(true);
            console.log("after pwd err = ")
            console.log(pwdError)
        }
    };

And actually the problem is that setLoginError(true); and setPwdError(true); do not work.

    const [loginError, setLoginError] = useState(false);
    const [pwdError, setPwdError] = useState(false);

That is, immediately after they are called false is still printed to the console and accordingly, the request is sent . I have not encountered these before, I will be glad to get help.

How to force useState hook to change the state inside the closure?

0 Answers0