I’m getting this error below when I try to implement an Axios post with react-hook-form
:
Unhandled Rejection (TypeError): e.preventDefault is not a function
The problem started occuring when I added onSubmit={handleSubmit(handleSubmitAxios)}
to my <form>
. Basically, I want my form to be controlled by react-hook-form
, using my custom handleSubmitAxios
post call that communicates with my backend.
This is for my sign-in component, currently just testing out the functionality of react-hook-form however the e.preventDefault
message is confusing me.
export default function SignIn() { const { register, control, errors: fieldsErrors, handleSubmit } = useForm(); const history = useHistory(); const initialFormData = Object.freeze({ email: "", password: "", }); const [formData, updateFormData] = useState(initialFormData); const handleChange = (e) => { updateFormData({ ...formData, }); }; const dispatch = useDispatch(); const handleSubmitAxios = (e) => { e.preventDefault(); console.log(formData); axiosInstance .post(`auth/token/`, { grant_type: "password", username: formData.email, password: formData.password, }) .then((res) => { console.log(res); localStorage.setItem("access_token", res.data.access_token); localStorage.setItem("refresh_token", res.data.refresh_token); history.push("/"); window.location.reload(); dispatch( login({ name: formData.email, password: formData.password, loggedIn: true, }) ); }); }; const classes = useStyles(); return ( <Container component="main" maxWidth="xs"> <CssBaseline /> <div className={classes.paper}> <Typography component="h1" variant="h5"> Sign in </Typography> <form className={classes.form} noValidate onSubmit={handleSubmit(handleSubmitAxios)} > <FormControl fullWidth variant="outlined"> <Controller name="email" as={ <TextField variant="outlined" margin="normal" inputRef={register} required fullWidth id="email" label="Email Address" name="email" autoComplete="email" autoFocus onChange={handleChange} helperText={ fieldsErrors.email ? fieldsErrors.email.message : null } error={fieldsErrors.email} /> } control={control} defaultValue="" rules={{ required: "Required", pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i, message: "invalid email address", }, }} /> </FormControl> <Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit} onClick={handleSubmit} > Sign In </Button> </form> </div> </Container> ); }
Thank you for any help or guidance on how I can solve the original error!
Advertisement
Answer
As per the docs, First parameter is the data or errors
object, second parameter is the form event
.
((data: Object, e?: Event) => void, (errors: Object, e?: Event) => void) => Function
In your case is e
is the data, that’s why you’re getting e.preventDefault
is not a function error.
Try like this
const handleSubmitAxios = (data, e) => { e.preventDefault(); // Actually, you don’t need to call this, Because it’s already called inside react hook form. console.log(data) .....
But, The react-hook-form
is already preventing the default form event, Not sure why you wanna do that again. Check this screen shot once and demo too