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 !
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?"
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.
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.
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
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
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.
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.
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?
@@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?
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 ?
You sir, are an amazing human for making forms so easy!
Amazing to hear~!
Thank you very much for this video!
Thanks, this is an old version, maybe it's worth checking v7 instead.
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 :)
Thanks man! Good stuff 👍
Please checkout the new version v7, v6 is 2 years behind.
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 !
Great and helpful Video, Thanks for sharing
My pleasure :)
subscribed and many thanks Bill, amazing!
Thank you
So Coooo...ooool. Love 👍
Awesome explanation, subscribed!
Thank you, buddy!
Gracias!
it’s awesome, thanku ❤️.
my pleasure :)
What's the use of while using useFieldArray forms
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?"
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.
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
amazing
Can you add yup schema validation to this? Noticed the array abject shape validation did not work for version react hook form version 6
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
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.
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 !
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.
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
How can i set empty object into fields array on init?
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.
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.
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.
Could you please tell me how to set defaultValues through condition ??
defaultValue={editMode ? 'Hi':' '}
its not working
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 👍
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 RUclipsr, but i am learning my way through. Thanks
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
What if I want to store the content directly in an array instead of in Objects.
"names" : [
"John",
"Steve
]
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.
On click how to reset only one form in the fields array and leave the
rest as it is…
reset({
...getValues(),
newDate: 'test'
})
How to populate arrayfield with data
`reset()`
@@bluebill1049 thanks sir..
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.