Skip to content
Advertisement

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

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

enter image description here

User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement