onDrop event not fired in react app

Question

I want to drag from a image to a span like this:

DRAG FROM HERE

<img src={img_src} draggable='true' onDragStart={this.dragStartHandler(idx)}/>

DROP HERE:

<span onDragOver={this.preventDefault} onDrop={this.dropHandler} 
    onClick={this.handleClick}>DROP HERE</span>

DRAG AND DROP HANDLERS:

  dragStartHandler = (idx) => (event) => {
    console.log(idx,"called drag event and loaded data in drag object")
    event.dataTransfer.setData('text', idx); 
  }

  dropHandler = () => (event) => {
    event.preventDefault();
    console.log("DROP EVENT")
  }

  preventDefault = () => (event) => {
    event.preventDefault();
    console.log("prevent default")
  }

A fiddle with this code is here: https://jsfiddle.net/69z2wepo/229855/

But the drop event is never called when i click on the draggable image, drag it over the drop area and release the mouse button. This is on chrome, firefox and safari.

How can I call the drop event correctly?

Answer 1

Solution:

Change

onDragOver={this.preventDefault}

to

onDragOver={this.preventDefault()}

if you're on ES6. Never harmful to go back to the basics :-)