TypeError: event.preventDefault is not a function on React Hook Form using Formcarry

Viewed 202

How can i validate this form with React Hook Form and Formcarry ?

I think I missed something or there is a logic error

Here is my code:

import { useForm } from "react-hook-form";
import { useForm as formCarry } from "@formcarry/react";

function Iletisim() {
  const FORM_ID = process.env.NEXT_PUBLIC_FORM_ID;

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const { state, submit } = formCarry({
    id: FORM_ID,
  });

  return (
    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div className="grid grid-cols-1 gap-5 py-8 md:grid-cols-2 md:py-16">
        <section className="">
          <div className="rounded-lg bg-white p-8 shadow-lg lg:col-span-3 lg:p-12">
            {state.submitted ? (
              <div>success</div>
            ) : (
              <form className="space-y-4" onSubmit={handleSubmit(submit)}>
                <div>
                  <label className="sr-only" htmlFor="name">
                    Name
                  </label>
                  <input
                    className="w-full rounded-lg border p-3 text-sm drop-shadow-xl focus-within:outline-none focus:border-rose-600"
                    placeholder="İsim"
                    type="text"
                    id="name"
                    name="name"
                    {...register("name", { required: true })}
                  />
                  {errors.name && errors.name.type === "required" && (
                    <div className="mt-2 flex items-center gap-2 rounded-xl bg-blue-100 p-2">
                      <p className="font-bold text-blue-700">
                        Size hitap edebilmemiz için lütfen isminizi belirtiniz.
                      </p>
                    </div>
                  )}
                </div>

                <div className="mt-4">
                  <button
                    type="submit"
                    className="inline-flex w-full items-center justify-center rounded-lg bg-rose-600 px-5 py-3 text-white sm:w-auto"
                  >
                    <span className="font-medium"> Gönder </span>
                  </button>
                </div>
              </form>
            )}
          </div>
        </section>
      </div>
    </div>
  );
}

export default Iletisim;

I used Formcarry and React Hook Form. Formcarry works correctly like this onSubmit={submit}

After clicking the submit button it gives this error

Unhandled Runtime Error

TypeError: event.preventDefault is not a function

1 Answers

From the doc handlesubmit, the signature is:

((data: Object, e?: Event) => void, (errors: Object, e?: Event) => void) => Function

The first argument is form data, the second argument is the event.

Let's see the submit method of @formcarry/react, it only receives one argument - the event.

import { useForm } from "react-hook-form";
import { useForm as formCarry } from "@formcarry/react";

function Iletisim() {
  const FORM_ID = process.env.NEXT_PUBLIC_FORM_ID;

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const { state, submit } = formCarry({ id: FORM_ID });

  return (
    <form onSubmit={handleSubmit((data, e) => submit(e))}>
    </form>
  )
}
Related