Tag: react-hook-form

Getting custom components to work within react-hook-form using onChange

I have a checkout cart where you have different cart items, and for each one you can change the quantity prior to purchase. Here’s how the code looks: And the PureInput: Everything works fine in terms of submitting the form. When I do, I get an array of whatever values I have entered into the input: My package versions: But

MUI + React Hook Form: Fill out TextField value but then can’t modify the value

javascript material-ui react-hook-form reactjs typescript

I’m using the combination of MUI + React Hook Form, so I’ve created a CustomTextField.tsx component to make it worked. Then at the app/parent level, I want to these steps: Fetch data and display to the TextField. Modify the text in TextField Submit the new value in TextField This is my approach: With this approach, I managed to display the

Perform function after form validation

javascript react-hook-form reactjs yup

I am using react, typescript, and Email JS library. I am using the react-hook-form library and yup to validate forms. I have worked out the validation and sending the email, but I am unable to do both these functions together. When a user submits the form, I want the “sendEmail” function to be called if the “handleSubmit(onSubmit)” function which validates

React Hook Form Not Updating Value If Default Values Is Array

forms javascript react-hook-form react-select reactjs

I am creating a dynamically generated form which reads a file from a template. I have an array of “questions” which are mapped onto a react-hook-form. The defaultValues I am using is an array of objects. The issue I am having is using react-select inside of a react-hook-form controller because it does not set the form state if it is

Uncaught TypeError: path.split is not a function in react

javascript react-hook-form react-hooks reactjs validation

I am wondering how I can solve this with new ways of coding. I’ve seen someone say this error is due to the update of react-hook-form, but I am not sure how to solve this. If anyone knows this, I would appreciate it. I originally tried to solve this by adding the “…” before register instead of using “ref=”. I

React-Hook Form: How do I convert the value of the quantity into a number that is inside the useFieldArray?

javascript react-hook-form reactjs

I have already declared the input to only receive numbers: But this would still save as a string. How can I convert the value of the quantity into a number or if I could parse this into an integer? The quantity input field is in the nestedFieldArray I recreated this in: https://codesandbox.io/s/react-hook-form-data-in-step-1-and-step-2-with-nestedarray-7hyksh?file=/src/nestedFieldArray.js:485-1532 This is what the data looks like in

React-Hook Form with useFieldArray: TextField value does not show up in the console. How can I fix it?

javascript react-hook-form reactjs

I wanted to enter the word Product but when I submit it, it does not show up in the console. What shows up in the console: As you can see here, the word Product does not appear in the console. Any idea on how I can solve this? This is the codesandbox link: https://codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-forked-vjwbp?file=/src/index.js this is the fieldArray.js where the

Yup conditional validation depending on if another field is valid?

javascript react-hook-form reactjs yup

I’m working on a project with a long registration form made with MUI, react-hook-forms and yup. There would be one field rendered at a time with a “Next” button to change the displayed input field to a next one (i.e. go from email field to name field). Right now it doesn’t let me submit the email field and display the

Unable to pass value from input to fromData in reactjs

fetch forms javascript react-hook-form reactjs

I am having a form using react-hook-form and I am updating the input forms using setState but when I am get formData and do a fetch request the value from the input text field is not loading at all. This is the picture when I update the input text field from setState and do a fetch request This is the

How to input only number in react-hook-form

javascript react-hook-form react-native reactjs

I’m using react-hook-form for my input components, but there is one problem. In some text field, for example, text field for validation that take only number, i don’t know how to do that, with normal textInput, we can use regex, like and put that function and hook value on onTextChange and value respectively , i tried same method above on