Get the 'dropped' div from the onDrop callback using React

Question

The onDrop event is being triggered in a React component but since it is a synthetic event, the parameters for the event only seem to include the destination of the dropped div, not the dropped div itself. I need to reference the div that was dropped. All that is returned through the parameters is this object: SyntheticDragEvent {dispatchConfig: Object, dispatchMarker: ".0.0", nativeEvent: MouseEvent, type: "drop", target: div.col-sm-3.drop-area…} Does anyone know of a way to retrieve the source rather than just the target?

Answer 1

You can get the native event from any SyntheticEvent with the nativeEvent property. From there you should be able to access anything you could from the normal event. So for example using SyntheticEvent.nativeEvent gives you access to .dataTransfer .currentTarget .target .relatedTarget and etc. SyntheticEvent.nativeEvent.target being the one you're looking for I think.