search

final-form / react-final-form-arrays

A component for rendering and editing arrays 🏁 React Final Form
MIT License
205 stars 70 forks source link

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

Open IzaGz opened 4 years ago

IzaGz commented 4 years ago

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?

toshiSat commented 4 years ago

Same thing is happening for me

silentorb commented 4 years ago

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}>

wdfinch commented 4 years ago

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