I have a simple react-beautiful-dnd app where I have multiple rows, and you can drag ponents 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 ponent 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:
;hidenavigation=1&theme=dark
I have a simple react-beautiful-dnd app where I have multiple rows, and you can drag ponents 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 ponent 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
Share Improve this question edited Jan 16, 2020 at 19:11 damon asked Jan 16, 2020 at 18:54 damondamon 2,8978 gold badges28 silver badges35 bronze badges1 Answer
Reset to default 8I 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./atlassian/react-beautiful-dnd/blob/master/docs/guides/identifiers.md