useFieldArray doesn't remove correct indexes

See original GitHub issue

Describe the bug I have discovered that after removing 5 indexes, wait for the render, then remove 5 other indexes, this time one of the index will be wrongly removed.

To Reproduce On CSB: add all the possible attributes on the select field, then remove the two last ones. The first remove will be fine, on the second one, variants should be removed from index 9 to 17, but variant n°2 is removed, and variant n°9 is kept. (Check console for id’s and indexes)

Codesandbox link (Required) https://codesandbox.io/s/problem-remove-usefieldarray-m8zub?file=/src/App.js

Expected behavior Elements at indexes should be removed correctly.

Workaround Using remove in a forEach instead of passing an array of indexes does the work.

Desktop (please complete the following information):

  • OS: Ubuntu 20
  • Browser : Chrome
  • Version : 87.0.4280.66

Additional context I’m making a form to add products variations, depending on attributes (Sizes, Colors, Cut, etc.), I discovered this bug when testing my migration from formik (it was triggering 30 renders per product variant update) to react-hook-form.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
cargallocommented, Feb 8, 2021

Hi, I realize that the problem in my code was that it mandatory to use item.id in the main wrapper of fields. If you set another key it doesn’t work. Maybe you can throw an error in that case? Without putting the key in that way it was deleting the last one!

image

https://codesandbox.io/s/react-hook-form-usefieldarray-forked-6urgq

0reactions
bluebill1049commented, Feb 8, 2021
Read more comments on GitHub >

github_iconTop Results From Across the Web

remove from useFieldArray doesn't work correctly · Issue #1571
I am facing the same issue with nested form. When I add defaultValue to all the elements, it works fine. Otherwise removing an...
Read more >
UsefieldArray react hook form deleting the last element only
Basically I'm trying to append and delete but the problem is when I'm deleting its deleting only the last element. append is working...
Read more >
useFieldArray - Simple React forms validation
Remove input/inputs at particular position, or remove all when no index provided. Rules. useFieldArray automatically generates a unique identifier named id ...
Read more >
React Hook Form - useFieldArray - Remove ERROR
A custom hook for working with Field Arrays (dynamic inputs). 0. 77.
Read more >
React Hook Form - useFieldArray - YouTube
In this session, we are taking a look at the useFieldArray custom hook to manage your dynamic form fields.working example: ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found