react-final-form-arrays icon indicating copy to clipboard operation
react-final-form-arrays copied to clipboard

fields.pop fields.remove fields.shift removes last item, any fix?

Open IzaGz opened this issue 4 years ago • 3 comments

BUG

"react-final-form": "^6.3.0",
"react-final-form-arrays": "^3.1.1",
"final-form": "^4.18.5",
"final-form-arrays": "^3.0.1",

just use this and every time last item removd, how ti fix this?

IzaGz avatar Mar 17 '20 13:03 IzaGz

Same thing is happening for me

toshiSat avatar May 17 '20 21:05 toshiSat

The underlying state is properly getting updated but the rendered react components become stale. It looks like a problem with this library's intended usage of wrapping each item field with:

<div key={name}>

When there is an array named foo and it has two items, the names of those items are foo[0] and foo[1]. When foo[0] is deleted, foo[1] takes it's place and is rendered as foo[0], which either React or Final Form sees as the original `foo[0] and assumes it hasn't changed.

In my case the issue was fixed by generating unique temporary keys for each item and wrapping each field with:

<div key={fields.value[i].key}>

silentorb avatar May 19 '20 04:05 silentorb

Thanks, @silentorb this worked for me. Wish this could be fixed by default.

wdfinch avatar Sep 15 '20 02:09 wdfinch