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