Access Target Drop element in React dnd

Viewed 639

Using React Dnd v15.1.1

I need to get the target element on drop either their Id or the whole object

I tried

const [{ canDrop, isOver }, drop] = useDrop(
  () => ({
     accept: ItemType,
     drop: (item, monitor) => addTaskToSprint(item.id, monitor),
  })
);

And here's addTaskToSprint declaration

const addTaskToSprint = (id, monitor) => {
    console.log(monitor.getDropResult());

    let body = {
       sprint: { 
          id: , //here where I need the target Drop Id 
       }
    };
    axios.put(process.env.REACT_APP_API_URL + "/tasks/" + id, body, {
        headers: { Authorization: `Bearer ${jwt}` },
    });
};

monitor.getDropResult() is returning null in the console

Then I tried the same process inside the drag declaration

const [{ isDragging }, drag] = useDrag(() => ({
    type: ItemType,
    item: task,
    collect: (monitor) => ({ isDragging: !!monitor.isDragging() }),
    end(item, monitor) {
        console.log(monitor.getDropResult());
    },
}));

And in here it's returning the dropEffect. Here's the logs

{
   "dropEffect": "move"
}

When I console.log(monitor) inside the drop result it gave me

console results to logging monitor object

Where targetId is the targeted drop element, but this Id is generated by react-dnd not the actual Id of the element

When I open the internalMonitor object from the picture above

I got inside nested objects all the drop Targets with their generated Id from react-dnd but I couldn't get the object of each Id (to get the target drop object)

console result of internalMonitor object

And here's how each object looks like

0: {"T0" => DropTargetImpl}
    key: "T0"
    value: DropTargetImpl
        monitor: DropTargetMonitorImpl
        internalMonitor: DragDropMonitorImpl
        registry: HandlerRegistryImpl {types: Map(8), dragSources: Map(4), dropTargets: Map(4), pinnedSourceId: null, pinnedSource: null, …}
        store: {dispatch: ƒ, subscribe: ƒ, getState: ƒ, replaceReducer: ƒ, @@observable: ƒ}
    spec:
      accept: "Task Card"
      collect: monitor => {…}
      drop: (item, monitor) => addTaskToSprint(item.id, monitor, drop)

To be clearer, check the screenshot of the results in the console

enter image description here

0 Answers
Related