#Unsure of how to actually invoke this function properly

10 messages · Page 1 of 1 (latest)

iron valve
#

Fairly new to programming period.
Basically I have form where upon clicking submit, this async function is triggered (returns a number based on the response from an axios post request).

Issue: I can't seem to get the right way to invoke this function(I never hit my console.log).


    const handleSubmit = async (e : React.FormEvent<HTMLFormElement>) : Promise<number>=> {
        e.preventDefault()
        console.log("Submit Button Clicked")
        const v1 = USER_REGEX.test(user);
        const v2 = PWD_REGEX.test(pwd);
        const v3 = EMAIL_REGEX.test(email)
        if (!v1 || !v2 || !v3) {
            setErrMsg("Invalid Entry");
            return 0;
        }
        else {
            console.log("Reached Else")
            const config = {
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                }
            }
            return axios.post<UserResponse>('http:://localhost:5173/Register', 
                JSON.stringify({username : user, emailAddress: email, password: pwd}), config)
                .then(res => {
                    console.log("Post Request Sent....got back response");
                    console.log(JSON.stringify(res.data));

                    //clear state and controlled inputs
                    setSuccess(true);
                    setUser('');
                    setPwd('');
                    setMatchPwd('');
                    return 1;
                })
                .catch(error => {
                    console.log("ERROR",error)
                    return 0;
                });
        }
    }

  <form onSubmit={void handleSubmit}>
delicate hawk
#

Try remove the void, so just onSubmit={handleSubmit}.

iron valve
#

I had that initially. Typescript was buggin out about this on the handleSubmit reference. Promise-returning function provided to attribute where a void return was expected

delicate hawk
#

That's not a TS error, that's an ESLint error.

#

For one, your handleSubmit isn't async at all, because you are not using any await in it (your axios call uses promise style instead)

#

So if you want to keep using promise style, just remove async, remove the return type/change the return type to void, and don't return the axios call.

#

If you want to rewrite to async/await, then do it, and either suppress or turn off/configure the rule.

iron valve
#

Oh that make sense

#

I probably should spend more time reading the docs...Been skipping to much