What does getHandlerId() do and how to use it?

Viewed 50

Some of the react-dnd examples use a getHandlerId() method.

For example in the simple example of a sortable list, the Card.tsx function:

  • Collects a handlerId from the monitor object within the useDrop method

    collect(monitor) {
      return {
        handlerId: monitor.getHandlerId(),
      }
    },
    
  • Returns that as an element of the "collected props"

    const [{ handlerId }, drop] = useDrop<
    
  • Uses it to initialize an HTML attribute named data-handler-id

    <div ref={ref} style={{ ...style, opacity }} data-handler-id={handlerId}>
    

What is this Id and why is it used?

What uses the data-handler-id attribute?

I'd expect to see getHandlerId() described in the API documentation as a method of the DropTargetMonitor (but it isn't).

0 Answers
Related