onSubmit with useCallback is not stepping into the metho

Question

I have a seemingly basic form for my site for people to join a waitlist on a splash page. Using examples I've found I've created the following method which will submit the email provided to my mongodb connection.

Upon clicking the submit button it will go to the onSubmit button but when I set the a break point within the useCallback it is not triggered. I cannot figure out what the issue is so thank you for the help.

const {
      register,
      handleSubmit,
      formState: { errors },
    } = useForm<FormData>({
      resolver: formValidation,
    });

    const onSubmit = useCallback(
      async (data: FormData): Promise<void> => {
        
        const waitlistDocument = {
          email: data.email
        };

        console.log(waitlistDocument);
  
        const response = await fetch('/api/waitlist', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(waitlistDocument),
        });
  
        if (!response.ok) {
          setError('There was a problem adding you to the waiting list. Please try again later.');
          return;
        }
        else {
          console.log("successfully filed");
        }
      },[useCallback]);


return (
     <div className="join">
                  <p className="waitingList">Join our waiting list</p>
                  {error && <div className="error">{error}</div>}
                  <form onSubmit={handleSubmit(onSubmit)} className="form">
                    <Input
                      name="email"
                      label="Email Address"
                      required
                      register={register}
                      error={errors.email?.message}
                    />
                    <Button type="submit" label="Submit" appearance="primary" />
                  </form>
                </div>
)

You haven't shown the most important part - the part where you are passing `handleSubmit(onSubmit)` to your form's `onSubmit` method (or an `onClick` on a button). The [docs](https://react-hook-form.com/docs/useform/handlesubmit) clearly describe how to use onSubmit — Adam Jenkins, Jul 02 '23 at 21:57
@AdamJenkins thanks, I added in the portion of the page that contains the form — gregwhitworth, Jul 02 '23 at 22:00
Thanks for adding the markup. Two questions: 1. does your `Button` component with a type of `submit` actually render a button with an html type of `submit`, 2 does your `resolver` return any form errors? If it does, then your `onSubmit` will never be called (because your form is invalid). It could be helpful to post the source of `formValidation` — Adam Jenkins, Jul 02 '23 at 22:02
@AdamJenkins yes the button is of type `submit`. I'm unsure how best to check the resolver for errors but in the local block scope there are 4 errors within the errors object. This is probably the issue and due to me grabbing the form from another page. Unsure how they're bound but let me take a look. — gregwhitworth, Jul 02 '23 at 22:07
@AdamJenkins that was it, thank you so much!! Let me know if you'd like to answer the question so I can mark it as correct. Truly, thank you! — gregwhitworth, Jul 02 '23 at 22:18

score 0 · Answer 1 · answered Jul 03 '23 at 04:23

Your code is not proper, I suggest you to take some courses on React.

const {register, handleSubmit, formState: { errors }} = useForm<FormData>({
      resolver: formValidation,
    });

    const onSubmit = useCallback(
      async (data: FormData) => {
        ...
        ...
      },[]); // remove the useCallback from here


return (
     <div className="join">
         ...
         <form onSubmit={(e) => handleSubmit(e)} className="form">
                    ...
         </form>
     </div>
)

First fix these basic things. Then you may need to improve your form handling logic as well.

I appreciate the response and while the code can obviously be improved this doesn't actually address the question I asked. Whereas adamjenkins comments around the issues with the form validation did in fact lead to solving the issue. — gregwhitworth, Jul 03 '23 at 21:43

onSubmit with useCallback is not stepping into the metho

1 Answers1