react-beautiful-dnd: When multiple lists exists, dragging content in one row will drag same index from all rows
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
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
- Difference between AJAX request and a regular browser request
- Alpine.js menu toggle issue
- Intl.DateTimeFormat options hash: Getting leading zeros with '2-digit'
- Selenium won't work unless I actually look at the Web page (perhaps anti-crawler mechanism by JavaScript?)
- Checking if an object is array-like
- pinterest web scrape image
- Mapping through these JSON elements
- How can I enter data into a custom-handled input field?
- RegEx for Javascript to allow only alphanumeric
- How to export static images on Nextjs?
- Using UUID In Dynamic Namespace In Socket IO
- How can I copy rich text contents to the clipboard with JavaScript?
- Error: Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'?
- AJAX implementation doesn't work properly for "like" button ASP.NET Core 2.1
- Jquery get form field value
- Deprecation Warning in Bootstrap SCSS
- How do I protect JavaScript files?
- CKEditor 5 toolbar fixed position
- Stop datepicker from floating around
- How to connect firebase firestore with my local firebase emulator suite?
- Transfer data with GOOGLE SHEETS
- Alert Box for webpage. Javascript/HTML
- why does javascript getMonth count from 0 and getDate count from 1?
- Delete a field from Firestore, with a dynamic key
- filter out object in array if object key value is null
- Is there an equivalent Javascript or Jquery sleep function?
- Why can Array.prototype methods be used with non-array objects?
- Turn off autocomplete for specific function in javascript in VS CODE
- JSON problem solution
- What happens when I add a module to the Global React object?