useFieldArray append not working properly

[ronaldruzicka]

Hi there,

I'm having a problem with append when using useFieldArray. I need to add a new project from a select of options and after clicking on CONFIRM it should append the project to the form values.

What it does is, that it logs the new project properly before append, but when I watch for "projects" it then logs undefined and then [{ roles: undefined }], but not the actual values that were passed to append.

Am I doing something wrong?
Please help 🙏🏻

Here is codesandbox: https://codesandbox.io/s/beautiful-banzai-b4jbk?file=/src/App.tsx

Thanks!

[bluebill1049]

each useFildArray host its own FieldArray, you will have to do an append at your child field array's.

useEffect(() => {
  append({})
}, [append])

more on this, next update you can use setValue: #2691

setValue('fieldArray', whateverDataHere)

[bluebill1049]

1. those inner components should be separate components instead live inside your main component (but that's not the issue)
2. here is working CSB: https://codesandbox.io/s/cocky-chaum-m73dl?file=/src/App.js maybe take a look at the diff.

[ronaldruzicka]

Thanks I'll check 👍

[ronaldruzicka]

Damn, I was missing defaultValue! 🤦‍♂️

Thanks for the help!

[bluebill1049]

np, but do follow my suggestion above, otherwise the perf is terrible for your form. your are unmount and remount all your child components inside.

[ronaldruzicka]

Yes, I'm refactoring right now and putting it in separate components.

[netrolite]

in my case i created a custom hook that was returning the return value of useFieldArray and i called that hook from multiple components. But the problem was that for it to work, every component had to be using the same object returned by the useFieldArray hook. Instead, every component received a different reference to the return value, I guess?

Basically I had to delete the hook entirely and pass the return value of useFieldArray from the parent component to all its children that needed it. Though I might want to instead use a context to avoid prop-drilling