Page reload while using react-hook-form

[chuhaiphu]

`import { Link } from "react-router-dom";
import { FormProvider, useForm } from "react-hook-form";
import { FormInput } from "src/components/Auth/Input/FormInput.jsx";
import { useApiPost } from "src/hooks/ApiHooks.jsx";
import { useNavigate } from "react-router-dom";

const LoginPage = () => {
const navigate = useNavigate();

const loginMutation = useApiPost({
key: ['login'],
url: 'account/login',
options: {
onSuccess: (data) => {
localStorage.setItem('token', data.token);
toast.success("Login successful! Welcome back!");
navigate('/product-list');
},
onError: (error) => {
console.error('Login failed:', error);
// toast.error("Login failed. Please check your credentials.");
}
}
});

const methods = useForm({
mode: 'onChange',
defaultValues: {
email: '',
password: ''
}
});

const { control, handleSubmit } = methods;

const onLogin = (data) => {
loginMutation.mutate(data);
};
return (

<Link to={"/product-list"} className="back-btn">





Back to Shop

Log In

<FormProvider {...methods} >

Log in

I am a returning customer

<FormInput
name={"email"}
type={"email"}
placeholder={"shop@company.com"}
label={"E-mail"}
control={control}
rules={{
required: 'Email is required!',
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i,
message: 'Invalid email address!'
}
}}
/>

<FormInput
name={"password"}
type={"password"}
placeholder={"**********"}
label={"Password"}
control={control}
rules={{
required: 'Password is required!'
}}
/>

<Link to={'/register'} className="forgot-pass">Forgot Password?

Login

If you dont have account

<Link to={"/register"} className="btn register-btn" type="submit">
Register

);
}

export default LoginPage`

I got page reload when i click Login button <button className="btn submit-btn" type="submit"> Login <svg xmlns="http://www.w3.org/2000/svg" width="35" height="14" viewBox="0 0 35 14" fill="none"> <path d="M25.0749 14L35 7L25.0805 0L29.12 6.06667H0V7.93333H29.12L25.0749 14Z"></path> </svg> </button>

                    Still not figuring why, please help

[oluwatunmiisheii]

Hi @chuhaiphu , the code does not look well formatted, could you maybe put it in code-sandbox or a similar tool and share it?