Designate Control of Dragging for a react-beautiful-dnd Draggable with dragHandleProps

In react-beautiful-dnd there is a separation between what is being dragged (a Draggable), and how a user drags it (a drag handle). This lesson will explain this distinction and show you how you can control what the drag handle is for a Draggable.

A <Draggable /> child function receives a provided object. This object has a property called dragHandleProps. This property gives us the ability to designate what part of the <Draggable /> the user interacts with for drag and drop. You’ll see how to pass this prop to a separate React component to designate control.