I have a ticket component which contains some data that should be transferred into another place at the database.
const [{ isDragging }, dragref] = useDrag(() => ({
type: ItemType.TICKET,
item: {
// data that should be transferred
},
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
}));
unfortunately the drop handler in the target component doesnt fire when I drop the item on it.
const [{ isOver, canDrop }, dropref] = useDrop(() => ({
accept: ItemType.TICKET,
collect: (monitor) => ({
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
}),
hover: (item, monitor) => {
// works fine and prints the correct data
console.log(item);
console.log(monitor.canDrop()) // true
},
drop: (item) => console.log(item), // <---- doesn't work somehow
}));
Want I absolutely don't understand is, why the hover listener in the useDrop Hook works absolutely fine, but the drop listener doesnt.
First I though that some other onDrop or onDragOver-Listener (from when I did not used react-dnd) might interrupt it but even after deleting every single onDragOver and onDrop Listener the listener doesnt fire.
Note: ofc I surrounded everything with the DndProvider and the HTML5Backend. On a whole other part of the app both hooks work just as expected. I am using react-dnd 16.0.0