const [showRegister, setShowRegister] = useState(false); const { register, handleSubmit, formState: { errors }, reset, } = useForm({ resolver: zodResolver(formSchema), }); const handleFormSubmit: SubmitHandler = (data) => { console.log("hello world"); if (showRegister === true) { handleRegister(data); console.log("registering data"); } else { handleLogin(data); console.log("logging in "); } }; const handleRegister: SubmitHandler = async (data) => { console.log(data); const credentials = { username: data.username, password: data.password, confirmPassword: data.confirmPassword, email: data.email, }; try { const response = await add(credentials); console.log(response); reset(); } catch (error) { console.log(error); } }; const handleLogin: SubmitHandler = async (data) => { console.log(data); console.log("helloworld"); const credentials = { username: data.username, password: data.password, }; try { const response = await login(credentials); console.log(response); console.log(isSuccess); navigate("/user"); reset(); } catch (error) { console.log(error); } }; return ( ); No matter what changes I made, handleLogin was not being triggered...not just an issue regarding the API calls, even debugging statements like console.log were not being executed. Can anyone help me solve this? Please tell me how to fix the handleRegister function being called when the "Register" button is clicked, but nothing happens when the "Login" button is clicked?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Since you are using the form's onSubmit event, there is no need to use the onClick event for the login or register buttons. Try removing the onClick event on the button and try again.