Share list between multiple child components.

[Adesin-fr]

Hi,

I have a use case where I want to allow a user to set a status on cards.

Updating status consist of moving cards in a kanban view.

So, I have a collection of objects which have a status field, an ID and some others fields (name, etc...)

The main view gets data (the list of cards) as a prop, and then there is a Column component that each, implements useDraggable on the filtered list of cards (each column correspond to a status).

After setting the same "group" on all columns, I can drag and drop cards between columns.
I then manually change the status property of the dropped card in the onAdd event.

It works well on every first time, but as soon the list is updated (I change the status of a card, by dropping in on another column), the data I got from any new dragged card is not correct (it gives me the data of another card of the same column)...

I have added :key elements that are unique on every card, but it did not solved my issue :(

What am I doing wrong ? Any clue to help me on this one ?

Thanks !