React Hook Form - useFieldArray

In this session, we are taking a look at the useFieldArray custom hook to manage your dynamic form fields.

[adityatiwari]

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

[ahofi]

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!

[talatkuyuk]

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

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

[cloudsss]

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!

[budiman-krug]

Thank you!

The best human being is the one who benefits others.

[rafaelreale]

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

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

[noname]

You sir are great. Thankyou for this awesome library.

[harrisonwell]

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

[ArtiomNeganov]

Thank you very much! It was very useful.

[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?

[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

[semifew]

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

[budiman-krug]

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)

[athulgeorge]

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.

[JJ-nmsh]

great video. what approach would you say would be best for using react hook form with a custom build select (so not using native <select> element) - any demos? Thanks

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

[NARAYANSHARMA-mcbb]

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.

[rujalsapkota]

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