Custom Inputs optionally used with react-hook-forms #7266
Replies: 2 comments
-
can you share a simple codesandbox? |
Beta Was this translation helpful? Give feedback.
-
Here is a super Simplified CodeSandbox Example. This version would not actually be a problem to implement by just using conditionally depending whether control is passed to the component, but it demonstrates the same problem that actually exists for more complicated components. In the pic below the MyCheckbox-component that has been commented out will crash the app, since it doesn't have control-prop (or name). MyCheckbox has been written, so that if the useController-hook wouldn't crash without control and returned just an empty object, it would work just as a normal MuiCheckbox. |
Beta Was this translation helpful? Give feedback.
-
Hi,
In my project I have several custom inputs: Selects, CheckboxTree etc. I have written them so that you can actually use them with react-hook-forms or without it, since I rather have only one component to use whether it is inside a react-hook-form or not. This causes some problems with using the hook-form hooks, since eg. useWatch and useController require the control object or they will crash. And hooks aren't supposed to be wrapped in try...catch statements.
My current solution is to actually write 2 Components, one to use wihtout hook-form and the other one to with hook-forms and then have a wrapper component that checks for control-object and loads correct component accordingly.
I'm just thinking would it be possible to have those hooks just return some kind of error-object if the control is missing instead of crashing the app. That way I could simply check for those inside the component and there would be no need for 2 separate components and if I make changes to eg. their layout, I wouldn't need to do that to 2 components.
Beta Was this translation helpful? Give feedback.
All reactions