Thanks for the great video! I can already see real-life scenarios where this feature would be handy. Also noticed your improved English. Keep it up, I'm a fan!
Amazing video. Super valuable information. Will definitely play with it and ask in comments if I have a question. Not sure if I will have any though. Explanation was on point and concise! Keep up the good work! Thank you and God bless you !
Thanks for the demo video. I am stuck with nested dynamic form (Same as your form but with one more append for specific field), please suggest something for this.
you are a life saver, thank you! Me and my dificulty to understand documentations ahhhh... now my problem changed: "how can i made a update form with it? populating a list with a json and allow the user to edit it anyway?"
Hi Bill, could you prepare a demo showing how to bind the data from the Redux storage with useFieldArray? I'm having some problems with it. Thank you. Great Video and Thank you for you helping.
This may just apply to V7, but I found that instead of just doing {...register()}, I had to do {...register("name")} to see any values in my onSubmit array.
Great video, thanks. I have a typescript error. When I enter 'name' as the parameter for useFieldArray({}) I get this typescript error: ******** "Type 'string' is not assignable to type 'never'. The expected type comes from property 'name' which is declared here on type 'UseFieldArrayProps'" ******** any idea why? When I remove my type of from useForm(); this error disappears
Thank you ! Im not sure the 'remove' methods provided by the lib is really removing at specified index tho. For me ths this doesn't work at all, it just remove the last of the array .. EDIT: I'm a noob. Please do not use as the key the index of the map when you iterate over you inputs. There is an 'id' property auto generated in your item that you must use as the key. At least, it's how i got it working
@@bluebill1049 do you mean by separating form fields into their own components and calling the hook in each of them? or is there a way to call the hook multiple times within 1 component?
Hi, I have a doubt, If the default values has a object data For eg: defaultValues: { "recipeTags": { "mainIngredient": ["Rice"], "course": ["All-day"], "cuisine": ["Chinese"] } } Now I want to loop :"recipeTags" using UseFieldArray. Is it possible?
Hello thank you for this awesome video. I really love the library . I just have a question if someone can help me. I'm using the version 7 at the moment but I think the logic pretty much the same. There is my question: Is it okay to leave the append function with an empty object: append({}) ..or should I always give the default values inside of it? I suppose that if I don't, it wil just pick the defaultValues from each individual inputs? I'm a little bit confused because in the doc, the examples always specifies them in the append fuction, even if there is also defaultValues present in each input.
Can you show us how to handle nested data? ex: instead if "name":"Hello" How can we make change to "Name": { "firstName": "Hello", "lastName": "World"}, "Type":"test" etc...
@@bluebill1049 Hello Bill, Can you give a quick example on Nested arrays Ex: "Name": [{ "firstName": "Hello", "lastName": "World"}], "Type:"newTest". is there a video I can follow for this ?
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
You sir, are an amazing human for making forms so easy!
Amazing to hear~!
Thanks for the great video! I can already see real-life scenarios where this feature would be handy. Also noticed your improved English. Keep it up, I'm a fan!
Thanks mate! Try my best :)
Amazing video. Super valuable information. Will definitely play with it and ask in comments if I have a question. Not sure if I will have any though. Explanation was on point and concise! Keep up the good work! Thank you and God bless you !
Thank you very much for this video!
Thanks, this is an old version, maybe it's worth checking v7 instead.
subscribed and many thanks Bill, amazing!
Thank you
Thanks man! Good stuff 👍
Please checkout the new version v7, v6 is 2 years behind.
Awesome explanation, subscribed!
Thank you, buddy!
Great and helpful Video, Thanks for sharing
My pleasure :)
What's the use of while using useFieldArray forms
So Coooo...ooool. Love 👍
Thanks for the demo video. I am stuck with nested dynamic form (Same as your form but with one more append for specific field), please suggest something for this.
take a look at the example folder, there is an example of array of array
you are a life saver, thank you! Me and my dificulty to understand documentations ahhhh... now my problem changed: "how can i made a update form with it? populating a list with a json and allow the user to edit it anyway?"
Can you add yup schema validation to this? Noticed the array abject shape validation did not work for version react hook form version 6
it’s awesome, thanku ❤️.
my pleasure :)
How can i set empty object into fields array on init?
Hi Bill, could you prepare a demo showing how to bind the data from the Redux storage with useFieldArray? I'm having some problems with it. Thank you. Great Video and Thank you for you helping.
What's the problem?
thank you for the video but I have a question, how can I show by default elements?
use `defaultValues` at useForm, or you can also use `reset` API at `useEffect`.
@@bluebill1049 can you give me an example using defaultValues at useForm please
because my input name is like this: name={`checker[${ index }].name`}
Has the API for react-hook-form v.7 changed with respect to refs ? I get errors on the line ref={register()} inside input, what's going on?
Yes, v7:
Thank you @Bill
THANK YOU SO MUCH!
YOU ARE WELCOME! ❤️
@@bluebill1049 how can i apply nested default value in second append
codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-x7btr?file=/src/nestedFieldArray.js
@@ravendonly1 you can use append at the nested child with at useEffect, or you can use setValue('test', []) to update the entire field array.
Amazing video, amazing lib! A little doubt, how I render a input components before run the append?
what's the reason to re-render your input?
@@bluebill1049 Hi! This isn't a re-render, I guess. I just need to have an input before clicking on append button. I don't know if was clear 😅
@@ramonmaciel6230 check the doc for `defaultValues`, there is an example in the doc as well.
How to add error.message for each field ???? I am unable to use optional chaining
errors.test && errors.test.message (if you can't use optional chaining)
@@bluebill1049 thanks
This may just apply to V7, but I found that instead of just doing {...register()}, I had to do {...register("name")} to see any values in my onSubmit array.
Gracias!
Great video, thanks. I have a typescript error. When I enter 'name' as the parameter for useFieldArray({}) I get this typescript error: ******** "Type 'string' is not assignable to type 'never'. The expected type comes from property 'name' which is declared here on type 'UseFieldArrayProps'" ******** any idea why? When I remove my type of from useForm(); this error disappears
Thank you !
Im not sure the 'remove' methods provided by the lib is really removing at specified index tho. For me ths this doesn't work at all, it just remove the last of the array ..
EDIT: I'm a noob. Please do not use as the key the index of the map when you iterate over you inputs. There is an 'id' property auto generated in your item that you must use as the key. At least, it's how i got it working
Have a play this one: codesandbox.io/s/react-hook-form-usefieldarray-vy8fv
@@bluebill1049 I saw you respond to everyone on every forums... and now even on a YT channel, now that's dedication ! Thank you so much :)
It's a passion to make something work for us (developers).
@@bluebill1049 you know what? I subscribed your channel after reading this one "It's a passion to make something work for us (developers)."
@@jackhoang5019 Thanks, Jack.
amazing
Hey Bill, is it possible to use the hook multiple times in a form?
YES :)
@@bluebill1049 do you mean by separating form fields into their own components and calling the hook in each of them? or is there a way to call the hook multiple times within 1 component?
@@bpark765 take a look at this example: codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-x7btr
@@bluebill1049 Exactly what I was looking for! You're the best 👍
What if I want to store the content directly in an array instead of in Objects.
"names" : [
"John",
"Steve
]
Could you please tell me how to set defaultValues through condition ??
defaultValue={editMode ? 'Hi':' '}
its not working
Hi, I have a doubt, If the default values has a object data
For eg: defaultValues: {
"recipeTags": {
"mainIngredient": ["Rice"],
"course": ["All-day"],
"cuisine": ["Chinese"]
}
}
Now I want to loop :"recipeTags" using UseFieldArray. Is it possible?
it's possible but, recipeTags should be an array as well.
Hello thank you for this awesome video. I really love the library . I just have a question if someone can help me. I'm using the version 7 at the moment but I think the logic pretty much the same. There is my question:
Is it okay to leave the append function with an empty object: append({})
..or should I always give the default values inside of it?
I suppose that if I don't, it wil just pick the defaultValues from each individual inputs? I'm a little bit confused because in the doc, the examples always specifies them in the append fuction, even if there is also defaultValues present in each input.
Thank you so much very helpful, can you increase the voice, it very low, and can you zoom your screen bigger, it a very small letter, pls
sorry about that, I will make sure to improve that next time. I am not a professional UA-camr, but i am learning my way through. Thanks
Can you show us how to handle nested data? ex: instead if "name":"Hello" How can we make change to "Name": { "firstName": "Hello", "lastName": "World"}, "Type":"test" etc...
name="yourDetails.firstName"
@@bluebill1049 Hello Bill, Can you give a quick example on Nested arrays Ex: "Name": [{ "firstName": "Hello", "lastName": "World"}], "Type:"newTest". is there a video I can follow for this
?
@@JesseQuickEats take a look at the hook form repo, there is an example in the examples folder.
How to populate arrayfield with data
`reset()`
@@bluebill1049 thanks sir..
On click how to reset only one form in the fields array and leave the
rest as it is…
reset({
...getValues(),
newDate: 'test'
})
Please use an external microphone.
funny how much the battery percentage bothers me
ahahhaha
Poor quality video, it is a problem, i can’t read
It's still processing for HD.
It's 4K, that's why taking a while to process.