[useFieldArray] How to properly remove properties added to a fieldArray

[tatsuya-asami]

What is occurring

1. add a property to the array created by useFieldArray
2. useFieldArray's remove is used to delete the array
3. the property added in step 1 does not disappear.

screen shot

input values

after click remove by remove of uid 2

My questions

1. using setValue seems to be the expected behavior, is it the proper way?
2. is it possible to use remove in useFieldArray to get the expected behavior?

sandobx

https://codesandbox.io/p/github/tatsuya-asami/react-hook-form-sync-field-array/main

react 18.3.1
react-hook-form 7.53.0

[BrendanC23]

Before anything is deleted, you have:

editingUid index 0: user 1
editingUid index 1: user 2
editingUid index 2: user 3

After deleting the item at index 1, you have:

editingUid index 0: user 1
editingUid index 1: user 3

When you remove an item, you aren't clearing the editingUid. This means that the description's input is still associated with index 1, which is now "user 3".

Try this code:

<button type="button" onClick={() => {
    setEditingUid(null);
    remove(index);
}}>

[tatsuya-asami]

Thank you so much. It works fine!
Do you think I should avoid using setValue?
My actual code is much more complicated. setEditingUid is far from delete button, so it's easy to use setValue

setValue(
  "userList",
  getValues("userList").filter((_, i) => i !== index)
);

[BrendanC23]

I think remove more clearly conveys what the code is doing compared to setValue with filter. If you don't want to prop-drill a fieldArray, you can put it into React Context.

[tatsuya-asami]

Thank you for your quick reply!
I see. I have been racking my brains trying to solve this problem.
I appreciate you so much!