Insert from useFieldArray doesn't work as expected

[DawidNazarko]

Describe the bug
Clicking INSERT button for first FieldArray - useFieldArray1 inserts properly a new FieldArray between useFieldArray1 and useFieldArray2 but value nestedArray is [{ field1: "field21", field2: "field22" }] (so the same as second FieldArray - useFieldArray2 ) instead of [{ field1: "abc", field2: "123" }].

To Reproduce
Case 1:

1. Click INSERT for first FieldArray - useFieldArray1
2. Get nestedArray = [{ field1: "field21", field2: "field22" }]

Case 2:

1. Click INSERT for second FieldArray - useFieldArray2
2. Get empty nestedArray. No nested fields are rendered

Codesandbox link (Required)
https://codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-vitxu?file=/src/index.js

Expected behavior
Case 1, 2:
nestedArray should be equal to return of getFieldArrayValues function from example - insert(index + 1, getFieldArrayValues()) - in this case [{ field1: "abc", field2: "123" }] and these values should be rendered.

Desktop (please complete the following information):

• OS: macOS
• Browser chrome

Additional context

• If I change controlled inputs to uncontrolled then in both cases I get empty nestedArray
• Sometimes I get error: data.slice is not a function or its return value is not iterable but after a few page refreshes it starts to work

[bluebill1049]

each useFieldArray host its own field array, if you want your nested FieldArry to append, you should use the nested useFieldArray instance.

[DawidNazarko]

Ok, but it doesn't explain why inserting works inconsistently. Case 2 is what you described and explained but in case 1 it clones nested FieldArray from following FieldArray.

[bluebill1049]

what's case 1? steps reproduce, please. there r multiple insert buttons on the screen which one to press and etc.

[DawidNazarko]

I'm referring to my first post where I gave 2 cases. The button to press is that have INSERT label and is placed under DELETE button. Sorry, maybe I should have deleted all redundant buttons.

[bluebill1049]

I'm referring to my first post where I gave 2 cases. The button to press is that have INSERT label and is placed under DELETE button. Sorry, maybe I should have deleted all redundant buttons.

so you mean the first Insert and delete right?

[DawidNazarko]

I updated codesandbox.

Initial state:

Clicking first INSERT (next to useFieldArray1) gives:

Clicking second INSERT (next to useFieldArray2) gives:

[bluebill1049]

much better thanks.

[bluebill1049]

The first case works because the data is in defaultValues.

[DawidNazarko]

Ok, thanks :) is there a nice way to create FieldArray with empty nested FieldArray (first case) when clicking first INSERT button (next to useFieldArray1)?

[bluebill1049]

i guess you can do at useEffect at the child FieldArray right? after mount just all append

[DawidNazarko]

i guess you can do at useEffect at the child FieldArray right? after mount just all append

I'm doing it exactly as you said for creation form and it works.

But when I'm editing something I'm fetching data from API and populate the form through defaultValues. Should I use setValue then?

[bluebill1049]

i guess you can do at useEffect at the child FieldArray right? after mount just all append

I'm doing it exactly as you said for creation form and it works.

But when I'm editing something I'm fetching data from API and populate the form through defaultValues. Should I use setValue then?

What do you mean to edit something? if you want to update a single field/cell, yes you can use setValue.