30

In the code below the UI renders two "Column" components and each column contains two draggable elements called "Tasks". When the user drags a "Task" between columns the code works - up to a point. When the user continuously drags the task components around eventually they will stop dragging and the user gets an error that says:

Unable to find draggable with id: X

I don't know why this happens nor how to fix it.

Note: I am assuming the way the library works is when you drag elements you need to reorder and update your state in the onDragEnd function.

Here is my code:

app.js

import React,{useState} from 'react';
import {DragDropContext} from 'react-beautiful-dnd';
import helper from './helper_functions'

import Column from './Components/Column';

function App() {

  let initialState =   [
    {
      groupName:"Today",
      tasks:[
          {id:"1", title:"Test-1"},
          {id:"2", title:"Test-2"}
        ]
    },
    {
      groupName:"Tomorrow", 
      tasks:[
          {id:"3", title:"Test-3"},
          {id:"4", title:"Test-4"}
        ]
    },
  ]


  const [taskList, setTasks] = useState(initialState)

  function onDragEnd(val){

     let result = helper.reorder(val.source,val.destination,taskList);
     setTasks(result)
  }

  return (
    <DragDropContext onDragEnd={onDragEnd}>
       <Column droppableId="Today" list= {taskList[0].tasks} type="TASK"/>
       <Column droppableId ="Tomorrow" list = {taskList[1].tasks} type="TASK"/>
       <div> context hello world </div>
    </DragDropContext>
  );
}

export default App;

src/helper_functions

export default {
    reorder:function(source,destination,taskDataArr){

     let taskData = [...taskDataArr]

 //     //_____________________________________________________________Source data
    let sourceGroupIndex = taskData.findIndex((val, index) => {                // iterate and find "Today" (or other) index in list data
        return val.groupName === source.droppableId
    });

    let draggedTask = taskData[sourceGroupIndex].tasks.find((val, index) => {  // Get specific task object based on index
        return source.index === index
    }); // dragged object

    let sourceListCopyWithElementRemoved = taskData[sourceGroupIndex].tasks.filter((val, index) => {
        return index !== source.index // removes dragged element from array
    });

    // //__________________________________________________________________Destination data

    let destinationGroupIndex = taskData.findIndex((val, index) => {  // iterate and find "Tomorrow" (or other) index in list data
        return val.groupName === destination.droppableId
    });


    taskData[destinationGroupIndex].tasks.splice(destination.index, 0, draggedTask); // insert dragged item to new place
    taskData[sourceGroupIndex].tasks = sourceListCopyWithElementRemoved

    return taskData

  }


}

src/Components/Column

import React from 'react';
import {Droppable} from 'react-beautiful-dnd';
import Task from "../../Components/Task"

function Column(props){
   const { classes, droppableId, list, type} = props;

   let style = {
    backgroundColor:"orange",
    height:"300px",
    width:"400px",
    margin:"100px"

   }

   console.log(list)



    return (

       <Droppable droppableId = {droppableId} type={type}>
       {provided => (

          <div {...provided.droppableProps} ref={provided.innerRef} style={style}>
          <h2>{droppableId}</h2>

            {list.map((val,index)=>{
               return <Task id={val.id} key={index} index={index} title={val.title}/>
            })}

           {provided.placeholder}
          </div>
        )
       }
       </Droppable>
    )
}

export default Column

src/Components/Task

import React from 'react';
import {Draggable} from 'react-beautiful-dnd';



function Task(props){
    const { classes, id, index,title } = props;
    let style = {
    backgroundColor:"red",


   }

    return (
       <Draggable draggableId ={id} index={index} type="TASK">

         {(provided) => (
            <div
              ref={provided.innerRef}
              {...provided.draggableProps}
              {...provided.dragHandleProps}
            >
              <h4 style={style}>{title}</h4>
            </div>
        )}

       </Draggable>
    )
}

export default Task
4
  • 3
    Dear bro @William, For such a case like your question. it is better to put a reproduction of your project on GitHub or GitLab and leave its link here, someone like me checks out the project and finds the bug. Literally, I ask you this.
    – AmerllicA
    Feb 5, 2020 at 21:35
  • 1
    Okay, thanks for the polite response. I'll do that after work.
    – William
    Feb 6, 2020 at 2:34
  • 3
    @William can you provide some fiddle for this? Feb 6, 2020 at 7:17
  • Looks like someone below created a codesandbox
    – William
    Feb 10, 2020 at 3:07

15 Answers 15

70
+100

There are a few issues with your code:

  1. Error Unable to find draggable with id: X

In the Column component you used index as a key for the tasks. I think this is what causes this error.

Using the task id as key, in Column, makes this error go away.

  1. reorder has some issues:
    • it removes a task when dropped in the same column
    • raises an error when a task is dropped outside the columns

I had a bit of fun with you code and tried another way to reorder. This way of reordering might come in handy if you ever add a more columns - there is still room for improvements.

Hope it helps!

1
  • 4
    Using ID that is the same for draggableId prop instead of index for key prop solved my problem
    – Syed Aqeel
    Jul 11, 2021 at 16:00
38

If you are getting this error on React 18

Unable to find draggable with id: 

Try removing StrictMode

5
  • 3
    why the strict mode is affect this behavior ?
    – Guang Lin
    Oct 16, 2022 at 13:24
  • 7
    Seconded. This works for me, but I'd like to keep strict mode-- what's happening here?
    – Nathan
    Oct 30, 2022 at 21:16
  • 3
    there is drop-in replacement that fixed this issue here: github.com/hello-pangea/dnd Dec 28, 2022 at 15:04
  • 2
    Rather than replace the whole library or turn off Strict Mode, try using this solution: github.com/atlassian/react-beautiful-dnd/issues/… Jan 10 at 9:37
  • 1
    @MarcinHubert I believe that fork is a good enough solution that it warrants it's own answer. I would upvote it if it were.
    – ThaJay
    Feb 27 at 14:51
14

Not for this case, but For every one - check provided.draggableProps not provided.dropableProps

 <Draggable draggableId ={id} index={index} type="TASK">

         {(provided) => (
            <div
              ref={provided.innerRef}
              {...provided.draggableProps}
              {...provided.dragHandleProps}
            >
              <h4 style={style}>{title}</h4>
            </div>
        )}
</Draggable>

RBD try find node by provided.draggableProps. Missing this props got error: Unable to find draggable with id: X

1
  • 4
    i want to really thank you for this. it saved me after hours of try and error :) Jun 14, 2020 at 14:22
10

I had a similar issue, I was mapping through multiple draggable and had missed the key prop, Adding the key to Draggable fixed the issue for me

{tasks.map((t, index) => (
  <Draggable
    draggableId={t._id}
    index={index}
    key={t._id} >
     ....
  </Draggable>
}
2
  • 1
    Thanks! I added key={task.id} for my Draggable wrapper and also added key={column.id} to my Droppable wrapper and it works out of the box! Jan 31 at 13:25
  • Works like a charm. Thank you. Just pass your id instead of the index and the issue will be fixed Mar 7 at 17:04
7

For Error:

Unable to find draggable with id: X

  1. Remove Strict mode in React js.
  2. If you are using Next.js you can find the strict mode in next.config.js file

For Error:

Invariant failed: Draggable[id: 1]: Unable to find drag handle do the following

{process.browser && (
        <section>
          <DragDropContext onDragEnd={onDragEnd}>
                     //Your code with droppable and draggable
           </DragDropContext>
        </section>
)}

Related issue

6

I ran into the same issue however the following steps helps me

Step 1:

draggableId should be string, not an integer 

as per https://github.com/atlassian/react-beautiful-dnd/issues/1512

Step 2:

if you are coming from EggHead tutorial, this might have missed. Try to add a key property as mentioned in the top answer

<Draggable key={item.id} draggableId={item.id.toString()} index={index} >
1

Try converting the integer value to a string. It'll solve the issue as it solved mine

{tasks.map((t, index) => (
  <Draggable
    draggableId={t._id.toString()}
    index={index}
    key={t._id} >
     ....
  </Draggable>
}
1
  1. There is a YouTube lesson on react-beautiful-dnd. He posted his lesson progress in the Code Sandbox enter link description here You can open it and make sure. But I have on "react": "^18.1.0" does not work and gives an error

    Unable to find draggable with id:X

    And on older versions of react everything also works without errors.Try for example another version of react"^17.0.2"ю It worked for me

  2. Also remember, when installing the react-beautiful-dnd library, were there any dependency conflicts? Maybe you have not established all the connections and because of this it does not work correctly. In any case, as a test, I suggest downloading the code from the lesson and checking in my project whether it works or not. If it works, it means an error in the code, if not, then react-beautiful-dvd does not work correctly

1

I hope this will help someone. If you are experiencing this even your code is correct. Please check your react version. In react version 18.0, dnd will show unable to find draggable with id warning. Current solution to downgrade to 17 and it works flawlessly. I searched for the solution like remove strict mode, using dynamic import and other things but currently it's related to react 18.

1

Removing <React.StrictMode> fixed it for me.

0

Post it here, since this is the top link the Google for the same error.

It might be the case, that you do not render an element with the provided.dragHandleProps

<div>
      {someCondition && (
           <div>
               <DragIndicatorIcon {...provided.dragHandleProps}/>
           </div>
      )}
</div>

In this case move {...provided.dragHandleProps} outside the condition

<div {...provided.dragHandleProps}>
      {someCondition && (
           <div>
               <DragIndicatorIcon {...provided.dragHandleProps}/>
           </div>
      )}
</div>

Found this solution here

0

Resolved this issue by converting draggableId into string

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Oct 2, 2022 at 23:17
0

It works with react-beautiful-dnd and React 18 in StrictMode. https://github.com/atlassian/react-beautiful-dnd/issues/2399#issuecomment-1175638194

0

If you still getting this issue, there was a simple solution for you. Just remove <React.StrictMode> from the index.js.

0

For those who are experiencing the same problem with the @hello-pangea/dnd library, converting the id to string worked for me.

<Draggable key={ticket.id} draggableId={ticket.id.toString()} index={index}>
New contributor
Ricardo Costa is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.