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:

  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

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 15 (8 by maintainers)

Most upvoted comments

I updated codesandbox.

Initial state: image

Clicking first INSERT (next to useFieldArray1) gives: image

Clicking second INSERT (next to useFieldArray2) gives: image