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