A critical part of a form entry process is the submission of the form. This part of the process is always interesting when using a 3rd party library such as React Hook Form. One common fundamental task is letting the user know that the submission was successful. So, how do this in React Hook Form? Let’s find out.

An example

We have a simple form that has been implemented using React Hook Form. The form captures a users name:

type FormData = {
  name: string;
};

export default function App() {
  const { register, handleSubmit, errors } = useForm<FormData>();

  const submitForm = async (data: FormData) => {
    console.log("Submission starting", data);
    const result = await postData(data);
    console.log("Submitting complete", result.success);
  };
  return (
    <div className="app">
      <form onSubmit={handleSubmit(submitForm)}>
        <div>
          <input
            ref={register({ required: true })}
            type="text"
            name="name"
            placeholder="Enter your name"
          />
        </div>
        {errors.name && errors.name.type === "required" && (
          <div className="error">You must enter your name</div>
        )}
      </form>
    </div>
  );
}

#react