dohomi/react-hook-form-mui

`useWatch` results in null (reading 'control') error

Closed this issue · 4 comments

n2k3 commented

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version, I'm using react-hook-form-mui@v7.0.0

Current behavior 😯

I'm trying to use useWatch({ name: "matchClaims" }), but it results in the following TypeError:

 ⨯ TypeError: Cannot read properties of null (reading 'control')

I am using the import of useWatch via react-hook-form-mui as stated in the readme.
If you comment the line of useWatch, it works fine.
Am I doing something wrong?

Expected behavior 🤔

Able to use the value of the useWatch hook to form state as stated in the RHF docs

Steps to reproduce 🕹

See this CodeSandbox example

sadik-malik commented

This is expected. @n2k3 you are using useWatch in component which is not wrapped under FormContainer as children.

Try to move FormContainer to parent component or use useForm from 'react-hook-form' and pass control object to useWatch

n2k3 commented

Thanks for your comment @sadik-malik. I now understand why I can't use the useWatch() hook within a component that's not a child of the <FormContainer />.

Two remarks:

  • Lifting the <FormContainer /> up into a new component that is rendered in a page.tsx would not be ideal just to use the useWatch() hook.
  • It also doesn't seem appealing to separately install react-hook-form to be to use useWatch() hook outside of the <FormContainer />. I feels like working around the concept of the react-hook-form-mui package.

I resolved it by using local state to keep track of values for the <RadioButtonGroup />. This is possible for my specific use case as the value of this doesn't need to be included in the submit data of my form.

As this is no longer an issue, I will close it now.

dohomi commented

@n2k3 just keep in mind that react-hook-form and its API always depends either on the provided context or you pass control to its function. Its a very common case that you also might fire up your own useForm and then you can use whatever suits you to either provide control or use the to enable the state of the form.
Here are some common use cases:
https://github.com/dohomi/react-hook-form-mui/blob/master/apps/storybook/stories/FormContainer.stories.tsx#L145

sadik-malik commented

Regarding your remarks, @n2k3:

  1. To utilize useWatch, it requires a control object. This can be passed manually or accessed through context. In React, unfortunately, due to the one-way data flow, context works in such a way that your component needs to be wrapped with FormContainer if you intend to use useWatch.

  2. react-hook-form-mui is built on top of react-hook-form and all hooks from react-hook-form are exported from react-hook-form-mui. Therefore, it doesn't introduce additional dependencies. You can utilize useForm from either react-hook-form-mui or react-hook-form.

Additionally, I would appreciate further insight into your use case for a better way of employing useWatch outside of FormContainer. Typically, I employ it for tasks such as conditionally rendering elements or conducting validations.