React-sortable-hoc: SortableElement's children components are mixing their states after swapping

Created on 23 Aug 2019 · 2Comments · Source: clauderic/react-sortable-hoc

So I have created a sortable list with each of it's items containing a toggle button, each toggle buttons is a component that has it own state either "on"/"off".

There's this weird behaviour that is happening after swapping, as shown below

Sortable Bug

It seems like SortableElement's children (toggle buttons) are getting their states mixed or something after swapping.

I've recreated the weird behaviour on this sandbox: https://codesandbox.io/s/react-sortable-hub-bug-gtxp3

Source

MustafaFaris

Most helpful comment

You're not using a stable key prop for your sortable items. See https://reactjs.org/docs/lists-and-keys.html

Fixed sandbox:
https://codesandbox.io/s/react-sortable-hub-bug-izc06

The only code change I made was using value instead of index for the key of SortableItem

<SortableItem key={`item-${value}`}

clauderic on 23 Aug 2019

👍4

All 2 comments

You're not using a stable key prop for your sortable items. See https://reactjs.org/docs/lists-and-keys.html

Fixed sandbox:
https://codesandbox.io/s/react-sortable-hub-bug-izc06

The only code change I made was using value instead of index for the key of SortableItem

<SortableItem key={`item-${value}`}

clauderic on 23 Aug 2019

👍4

Perfect, that did solved the issue for me :smiley::thumbsup:
Thank you very much for the fast reply :pray: I've also noticed that you've updated/fixed all code examples that had the issue and I really appreciate that :v:

MustafaFaris on 24 Aug 2019

Was this page helpful?

0 / 5 - 0 ratings