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