React DnD - How to get ID of dragged item

Question

How can I console log in my file where I have the drop area, the id of the node that I am moving (draggable item). I believe I am supposed to use monitor.getItem(), as specified in the documentation, but I don't understand it,

I have a ref={drag} on my dragable and ref={drop} on my droppable node.

Draggable item:

  const [{ isDragging }, drag] = useDrag({
    item: { type: 'TODO_ITEM' },
    collect: monitor => ({
      isDragging: !!monitor.isDragging()
    }),
    drag: () => {
      console.log('dragging')
    }
  })

Drop area

  const [{ isOver, canDrop }, drop] = useDrop({
    accept: 'TODO_ITEM',
    collect: mon => ({
      isOver: !!mon.isOver(),
      canDrop: !!mon.canDrop()
    }),
    drop: monitor => {
      console.log(monitor)
      // monitor only returns { type: 'TODO_ITEM' }
    }
  })

Answer 1

I resolved it by pulling in the item via props on the dragable item, attaching it to the monitor, and picking it up on the droppable area.

Draggable item

export default function TodoItem ({ item }) {

  const [{ isDragging }, drag] = useDrag({
    item: { type: 'TODO_ITEM', itemID: item._id },
    collect: monitor => ({
      item: monitor.getItem(),
      isDragging: !!monitor.isDragging()
    })
  })

...

Drop area:

  const [{ isOver, canDrop }, drop] = useDrop({
    accept: 'TODO_ITEM',
    collect: mon => ({
      isOver: !!mon.isOver(),
      canDrop: !!mon.canDrop()
    }),
    drop: monitor => {
      console.log('moving item:', monitor.itemID)
    }
  })