In this session, we are taking a look at the useFieldArray custom hook to manage your dynamic form fields. working example: codesandbox.io/s/usefieldarra...
One of the better coding tutorials. Mostly I was just interested in the usage, eg for append and field arrays in general. I followed along and all works great. Keep up the good work!
Working great! The only issued I had was 'Uncaught TypeError: methods is null'. It was simply because I imported 'Control' from 'react-hook-form' (KO) instead of destructuring 'control' (lower case 'c') from the object returned by useForm() (OK). Thanks again from this great video. It's great the cursor is also set properly on a field added by the user when there is an error (like a required field with no value provided by the user). :)
Great video. That's exactly the use case I had: allowing the user to dynamically add extra items to an estimate or to a receipt :) It's also great you use TypeScript in your videos as its really becoming more and more required in lots of job offers (React + TS).
great video. what approach would you say would be best for using react hook form with a custom build select (so not using native element) - any demos? Thanks
Hi Beier, thank you for the great tutorial!! But I really want to know how to validate these "name fields" have the same value! It doesn't make any sense that user can type the same value over and over again.
Thanks for the video!! I tried this hook but notice that the state of the newly generated field created with the append method, doesn't look like expected, for example, the field is generated with the isDirty state as true by default. I am using the React Hook Form DevTools. By any chance have you seen this behavior before? Thanks in advance
Hello, thank you for the video. I have a question though: I want to have a language set with three select fields with options: first is "Language", second is "Oral Skill for this language" and "Writing skill for this language". However, I want initially only "language" field to appear, and only after selecting a language (i.e. giving it value), I want two other fields to appear. And the append button should become disabled as soon as I added a language, until we selected all three selects. N.B. I can not use onChange or OnValueChange functions. Does it still work because of watch?
fought literally week against usefieldarray xd less than 10min from video, and were able to finish my stuff. mby next time i check tutorials or read stuff before i start trying
Hey can you make a video of using react hook form with Zod and TS that passes register and errors into custom input components that, so UI can be standard instead of always having to build it out everytime, thankyou. Also great videos so far, I've learned alot, very useful.
Thanks for your demo! Have a question... Why do you use the dot here`cart.${index}.name`? When in other examples without the dot. Thanks for the answer
it cannot infer the fields type when using it on other component file inside form context area, where we are not passing the control props (optional if using form context)
hello sir i have a problem i want to get total in useFieldArray example append name price1 amount1 total1 when i click append again total2 autoamtically get valuei in total1
Thank you Beier! Approaching docs would be much easier now after watching this.
One of the better coding tutorials. Mostly I was just interested in the usage, eg for append and field arrays in general. I followed along and all works great. Keep up the good work!
You sir are great. Thankyou for this awesome library.
Thank you!
The best human being is the one who benefits others.
Thanks again for your work on this!
It is very advanced usage of the react hook forms, nice to have it, thanks.
No worries! Give it a try. It's quite powerful.
Thank you Bill.
Absolutely beautiful ❤️ I have to render a form which has nested arrays of objects.... This is far better than formik
Incredible, now I managed to implement. I didn't understand from the documentation.
Working great!
The only issued I had was 'Uncaught TypeError: methods is null'. It was simply because I imported 'Control' from 'react-hook-form' (KO) instead of destructuring 'control' (lower case 'c') from the object returned by useForm() (OK). Thanks again from this great video.
It's great the cursor is also set properly on a field added by the user when there is an error (like a required field with no value provided by the user). :)
Yea, I believe focus management is really important for accessibility.
Super nice video. Very helpful
So good. Thank you!
Most welcome! thank you.
Thank you very much! It was very useful.
You are most welcome! So glad to hear that.
Great video. That's exactly the use case I had: allowing the user to dynamically add extra items to an estimate or to a receipt :) It's also great you use TypeScript in your videos as its really becoming more and more required in lots of job offers (React + TS).
Thanks, your save my life
hahaha, glad I can give you a hand.
great video. what approach would you say would be best for using react hook form with a custom build select (so not using native element) - any demos? Thanks
Hi Beier, thank you for the great tutorial!! But I really want to know how to validate these "name fields" have the same value! It doesn't make any sense that user can type the same value over and over again.
Thanks for the video!!
I tried this hook but notice that the state of the newly generated field created with the append method, doesn't look like expected, for example, the field is generated with the isDirty state as true by default.
I am using the React Hook Form DevTools.
By any chance have you seen this behavior before?
Thanks in advance
Hello, thank you for the video. I have a question though: I want to have a language set with three select fields with options: first is "Language", second is "Oral Skill for this language" and "Writing skill for this language".
However, I want initially only "language" field to appear, and only after selecting a language (i.e. giving it value), I want two other fields to appear.
And the append button should become disabled as soon as I added a language, until we selected all three selects.
N.B. I can not use onChange or OnValueChange functions. Does it still work because of watch?
fought literally week against usefieldarray xd less than 10min from video, and were able to finish my stuff. mby next time i check tutorials or read stuff before i start trying
Hey can you make a video of using react hook form with Zod and TS that passes register and errors into custom input components that, so UI can be standard instead of always having to build it out everytime, thankyou. Also great videos so far, I've learned alot, very useful.
Thank you, I will get to it when I can, it's on my todo list.
@@bluebill1049 thankyou very much, I look forward to your video
Thanks for your demo! Have a question...
Why do you use the dot here`cart.${index}.name`? When in other examples without the dot. Thanks for the answer
For type checking.
@@bluebill1049 Thank you!
it cannot infer the fields type when using it on other component file inside form context area, where we are not passing the control props (optional if using form context)
How to calculate the total for each item if I have a quantity field? Thanks
How to move item of one useFieldArray to another useFieldArray ? we can use move for one specific fieldArray for moving item....
Hello Sir, can we make name field will be unique when user try to submit then get error like name field should be unique on particular field.
How would you manage multiple uses of useFieldArray? Say you had carts, items and products that were all arrays in the form object.
Have multiple `useFieldArray`?
@@bluebill1049 Yeah, I'm stupid. Thanks :)
Explore it's update value function
hello sir i have a problem i want to get total in useFieldArray example append name price1 amount1 total1 when i click append again total2 autoamtically get valuei in total1
why the codesandbox does not work?
I would like to ask about can I try two different arrays ? I mean two different names.
just create two useFieldArray instances and slot them into two different components.
@@bluebill1049 Thank you, Sir! I got it.
Accurate closed captions would be appreciated