react-beautiful-dnd: When multiple lists exists, dragging content in one row will drag same index from all rows

Question

I have a simple react-beautiful-dnd app where I have multiple rows, and you can drag components within their own rows.

My issue is that when I drag a Draggable within one row, the visual effect of content moving and the Dragged component disappearing happens on every row.

Here is a gif demonstrating my issue:

And here is a codesandbox with an interactive demonstration of the issue, with a step-by-step to reproduce the problem:

https://codesandbox.io/s/r-b-d-try-2-wgscc?fontsize=14&hidenavigation=1&theme=dark

Answer 1

I think your issue is caused by reusing draggable ids. Your ids are currently based on the index of the square. These will be repeated for your different rows. Try moving over to a unique id for each square

See here for more details: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/identifiers.md