React Hook Form - useFieldArray

[@budiman-kr5ug]

Thank you! The best human being is the one who benefits others.

[@adityatiwari7337]

Thank you Beier! Approaching docs would be much easier now after watching this.

[@talatkuyuk6556]

It is very advanced usage of the react hook forms, nice to have it, thanks.

[@bluebill1049]

No worries! Give it a try. It's quite powerful.

[@jsricochet]

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).

[@cloudsss83]

amazing stuff... i'm creating a form that it is supposed to be loaded with server data, and it allows users to update this data. The summary at the end that needs only the changed fields is giving me a headache, but your videos are helping me a lot. Thanks!

[@noname13345]

You sir are great. Thankyou for this awesome library.

[@jsricochet]

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). :)

[@bluebill1049]

Yea, I believe focus management is really important for accessibility.

[@rafaelreale8848]

Incredible, now I managed to implement. I didn't understand from the documentation.

[@jonathonbloomfield8991]

Thanks again for your work on this!

[@HelpOrNot]

Super nice video. Very helpful

[@rakibulhashanrabbi]

Amazing!

[@benphamvan3456]

Thank you Bill.

[@harrisonwell1719]

How to calculate the total for each item if I have a quantity field? Thanks

[@aulyaaryansyah6974]

thanks man

[@barbarojaviervalmasedavazq9713]

Thanks, your save my life

[@bluebill1049]

hahaha, glad I can give you a hand.

[@ab_semi]

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?

[@jeremygollehon7631]

So good. Thank you!

[@bluebill1049]

Most welcome! thank you.

[@ArtiomNeganov]

Thank you very much! It was very useful.

[@bluebill1049]

You are most welcome! So glad to hear that.

[@JJ-nm8sh]

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

[@袁潤江]

I need to store objects removed from useFieldArray remove method to another array for subsequent use. How can I achieve this?

[@longnq3]

Thanks for sharing

[@pedverse]

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

[@athulgeorge6744]

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.

[@bluebill1049]

Thank you, I will get to it when I can, it's on my todo list.

[@athulgeorge6744]

@@bluebill1049 thankyou very much, I look forward to your video

[@RomanH91]

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

[@bluebill1049]

For type checking.

[@RomanH91]

@@bluebill1049 Thank you!

[@alexjjwu]

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.

[@budiman-kr5ug]

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)

[@NARAYANSHARMA-mc1bb]

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.

[@nataliaduran8051]

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

[@nickolaki]

How would you manage multiple uses of useFieldArray? Say you had carts, items and products that were all arrays in the form object.

[@bluebill1049]

Have multiple `useFieldArray`?

[@nickolaki]

@@bluebill1049 Yeah, I'm stupid. Thanks :)

[@timothyduncanmacahilig1378]

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

[@rujalsapkota3824]

How to move item of one useFieldArray to another useFieldArray ? we can use move for one specific fieldArray for moving item....

[@notoreofreakshake]

hello, can i use this in a controller

[@MarcinMichalik-o5i]

why the codesandbox does not work?

[@z44-huynhkhangvy52]

Is it required with array of objects sir? I wanna use array of string instead, but typescript warns me with append("")

[@incognito14x2]

zdid you find the solution? typescript complains about typing

[@z44-huynhkhangvy52]

@@incognito14x2 yeah bro, just do this : const { append, remove, fields } = useFieldArray({ control: form.control, name: "skills" as never, }); and append("")

[@naywinhlaing7574]

I would like to ask about can I try two different arrays ? I mean two different names.

[@bluebill1049]

just create two useFieldArray instances and slot them into two different components.

[@naywinhlaing7574]

@@bluebill1049 Thank you, Sir! I got it.

[@nawazishali274]

Explore it's update value function

[@spa.3239]

Accurate closed captions would be appreciated

[@LinhVu-wz5nq]

Thank you