Next.js Discord

Discord Forum

Passing a ref to a function may read its value during render

Unanswered
<Milind ツ /> posted this in #help-forum
Open in Discord
<Milind ツ />OP
Not a nextjs issue but could someone help, i have a react hook form and passed the submit handler to the form component. While this works, the linter is not agreeing on it.

<form
                onSubmit={handleSubmit((data) => handleContactFormSubmit(data))}
                className="flex flex-col w-full gap-5"
            >


98 |
99 | <form
100 | onSubmit={handleSubmit((data) => handleContactFormSubmit(data))}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Passing a ref to a function may read its value during render

i did found github issue which was marked as resolved via PR on react repo: https://github.com/react/react/issues/35040

but i cant seem to resolve this linter.

7 Replies

Patrick MacDonald
@<Milind ツ /> hey does handling everything related to the submit in the usefrom work?
  const form = useForm({
    defaultValues: {
      frequency: initialFrequency || "weekly",
      firstCutDate: initialDate || new Date(),
      notes: initialNotes || "",
    },
    onSubmit: async ({ value }) => {
 .... your code here
  }


 <form
    onSubmit={(e) => {
      e.preventDefault();
      e.stopPropagation();
      form.handleSubmit();
    }}
    className="space-y-6"
  >
<Milind ツ />OP
test
huh
const { handleSubmit, register, reset, formState } = useForm({
        defaultValues: initialFormState,
        resolver: zodResolver(ContactFormSchema),
        mode: "onChange",
        reValidateMode: "onChange",
    });
    const [isVerified, setVerified] = useState(false);
    const [isSubmitted, setSubmitted] = useState(false);

    const handleContactFormSubmit: SubmitHandler<ContactFormType> = async (data) => {
    
    };
weird was unable to send full code
so my code is like this
Patrick MacDonald
Try declaring the on submit in side the use form