react-hook-form: Insert from useFieldArray doesn't work as expected
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:
- Click
INSERTfor firstFieldArray-useFieldArray1 - Get
nestedArray=[{ field1: "field21", field2: "field22" }]
Case 2:
- Click
INSERTfor secondFieldArray-useFieldArray2 - 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 iterablebut after a few page refreshes it starts to work
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 15 (8 by maintainers)
I updated codesandbox.
Initial state:
Clicking first
INSERT(next touseFieldArray1) gives:Clicking second
INSERT(next touseFieldArray2) gives: