CODEWITHSUNDEEP
javascriptreactjsantdreact-hook-form
Alex Ironside
Alex Ironside

Reputation: 5039

React hook form returning blank object on submit

Here's my simplified problem:

https://codesandbox.io/s/busy-fire-mm91r?file=/src/FormWrapper.tsx

And the code:

export const FormItemWrapper = ({ children }) => {
  return <FormItem>{children}</FormItem>;
};

export const FormWrapper = ({ children }) => {
  const { handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data); // logs { }
  };
  return <Form onFinish={handleSubmit(onSubmit)}>{children}</Form>;
};

export default function App() {
  const { control, watch } = useForm();
  console.log(watch()); // logs { }
  return (
    <FormWrapper>
      <FormItemWrapper>
        <Controller
          control={control}
          name="tmp"
          render={({ field }) => <Input {...field} />}
        />
      </FormItemWrapper>
      <FormItemWrapper>
        <Button htmlType="submit">Save</Button>
      </FormItemWrapper>
    </FormWrapper>
  );
}

The problem:

React-hook-form doesn't seem to see the data I type in. I can get it using antd, but can't with react-hook-form. Why? What am I missing?

watch() logs only once, and it logs { }. onSubmit logs { }

Upvotes: 0

Views: 814

Answers (1)

Max Arzamastsev
Max Arzamastsev

Reputation: 535

You have created two different form instances with useForm call. If you want to get current form context inside Controller you should use useFormContext and wrap your form in FormProvider.

Working example:

https://codesandbox.io/s/admiring-lehmann-mgd0i?file=/src/App.tsx

Upvotes: 3

Related Questions