Skip to content
Advertisement

Unable to find draggable with id x – reactjs – react-beautiful-dnd

having this issue with react-beautiful-dnd on my reactjs page.

I’ve gotten my code from here with some minor changes to the content of each "dragable"/"row"

Issue

Update: This issue happens when I try to drag my row

enter image description here

Data

questions is equal to

JavaScript

UI

enter image description here

Code

JavaScript

Advertisement

Answer

Solution / Fix

All I needed to do was to change the following

  1. Change the droppable id to something more unique <Droppable droppableId="question-drag-and-drop">

  2. set the draggable id to something more unique <Draggable key={`drag-id-${question.id.toString()}`} draggableId={`drag-id-${question.id.toString()}`} index={index}>

  3. I also had to remove the React’s StrictMode

Advertisement