Problem with useFieldArray with react-hook-form

JavaScript
1

For some reason I have a particular form setup with useFieldArray but the remove/append method is bugged. I have not encounter this problem with other forms using useFieldArray so I am not sure if it is an isolated case.

I have a sandbox link showing the problem with remove an item in the useFieldArray:

Step of reproducing the bug:

  1. Append a few arrays
  2. Remove an array
  3. Append again and you will see in the console that all other field arrays beside the new one becomes null for some reason.

I am using react-hook-form 6.13.1 since the new versions breaks a number of stuff in my existing forms so I do not plan to upgrade the version at the moment…

How can I fix this?

2

Hello @dark_dragonian, there are a few caveats you should be aware when working with useFieldsArray.

Among which:

  • It’s important to apply ref={register()} instead of ref={register} when working with useFieldArray so register will get invoked during map .

That alone should help you fix the issue.
But I suggest you to go on and review the docs to make sure you comply with all the requirements to avoid any further surprise.

https://react-hook-form.com/v6/api#useFieldArray

Hope this helps :sunny:

1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.