Home > Mobile >  Validation with yup failed for generic react hook form component
Validation with yup failed for generic react hook form component

Time:12-16

I am trying to make generic component for text input for react hook form.
Here is the link to sandbox:
https://codesandbox.io/s/eager-https-0osjz?file=/src/App.tsx Problem is with validation and it started when I moved code to separate component.
What I did wrong here?
I suspect that I make some issue with TS as I am using it first time.

CodePudding user response:

There is severals problems:

  • you're using two useForm instead of one, that's why errors aren't displayed and form isn't submitted
  • Controller need control props to work, you can get control from useForm and pass it down to child components or retrieve it with useFormContext

Your working example: https://codesandbox.io/s/quizzical-alex-d7gpn?file=/src/App.tsx

  • Related