React - Unhandled Rejection (TypeError): e.preventDefault is not a function

Question

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!

Answer 1

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