TypeError: e.preventDefault is not a function on React Hook Form using EmailJs

Question

I got an error once the form is submitted:
TypeError: e.preventDefault is not a function.

Here is my code:

import {React} from 'react';
import emailjs from 'emailjs-com';
import {useForm} from "react-hook-form";

const NameForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
      .then((result) => {
          console.log(result.text);

      }, (error) => {
          console.log(error.text);
      });
      e.target.reset();
  }

    return (
      <div>
        <h1 className="text-center text-md-left mb-3">Get in Touch</h1>
        <form className="contact-form" onSubmit={handleSubmit(sendEmail)}>
          <div className="form-group mb-0 py-3">
            <textarea className="form-control custom--fields-mod text-the-primary" id="message" rows="3" placeholder="Message *" name="message" {...register("message", { required: true })}></textarea>
            {errors.message && <span className="invalid-feedback d-block">Please fill out this field.</span>}
          </div>        
          <div className="form-group row py-2 mb-0">
              <div className="col-md-6">
                <div>
                  <div className="d-flex align-items-center">
                    <input className="mr-2" type="checkbox" id="yes_i_understand" name="yes_i_understand" {...register("yes_i_understand", { required: true })} />
                    <label className="font-size-12 mb-0" htmlFor="yes_i_understand">I understand and agree to the Privacy Policy and Terms and Conditions.</label>
                  </div>{errors.yes_i_understand && <span className="invalid-feedback d-block">You must agree before submitting.</span>}
                </div>
              </div>
              <div className="col-md-6 text-center text-md-left py-2 py-md-0">
                <input className="buttons-width float-md-right btn btn-dark-moderate-orange rounded-0" type="submit" value="SEND MESSAGE" />
              </div>
            </div>
        </form>
      </div>
    );

}
export default NameForm;

I saw the react hook form samples, but I'm not sure if i missed something on passing the data to the form.

You can check it here: https://codesandbox.io/s/react-hook-form-using-emailjs-2k6x5

Answer 1

The handleSubmit function calls your sendEmail with two parameters. The first one is the form data and the second one is the event.

This should solve your issue :

const sendEmail = (data, e) => {
    e.preventDefault();

    emailjs
      .sendForm("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", e.target, "YOUR_USER_ID")
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
    e.target.reset();
  };

Sandbox : https://codesandbox.io/s/react-hook-form-using-emailjs-forked-s2pey

Answer 2

While Guillaume's answer fixes the problem the following solution would be the way to handle it only using react-hook-form and not using the event object at all. So just use the emailjs.send method and pass the form values provided by RHF to this method. To reset the form you could use the reset method of RHF.

const {
  register,
  handleSubmit,
  reset,
  formState: { errors }
} = useForm();
const sendEmail = (formData) => {
  emailjs
    .send("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", formData, "YOUR_USER_ID")
    .then(
      (result) => {
        console.log(result.text);
      },
      (error) => {
        console.log(error.text);
      }
    );
  reset();
};