title: React Drag & Drop Event propagation problem
body: <p>I have a simple Drag &amp; Drop setup. What's special is that there can be dropzones inside dropzones. My problem is, that whenever I drop something in my child component, the parent event gets fired as well <strong>but only under certain circumstances.</strong></p>
  
  <p>For example (this works, no event propagation):</p>
  
  <pre><code>export default class Folder extends Component {
      constructor(props) {
          super(props);
          this.state = {
              dragActive: false
          };
      }
  
      onDragOver = (e) =&gt; {
          e.preventDefault();
          this.setState({ dragActive: true });
      }
  
      onDragLeave = () =&gt; {
          this.setState({ dragActive: false });
      }
  
      onDrop = (e) =&gt; {
          e.stopPropagation();
          alert("test");
      }
  
      render() {
          return (
              &lt;div className="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-8ths" onDragOver={this.onDragOver} onDragLeave={this.onDragLeave} onDrop={this.onDrop}&gt;
  
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>The important part is this line here:</strong> </p>
  
  <pre><code>onDrop={this.onDrop}
  </code></pre>
  
  <p>If my drop event is inside the same component everything works as expected.</p>
  
  <p><strong>As soon as I change the line to this:</strong></p>
  
  <pre><code>onDrop={() =&gt; this.props.onDropFunction(event, this.props.folder.id)}
  </code></pre>
  
  <p>The event propagation stops working. This is the onDrop function I am calling inside the parent:</p>
  
  <pre><code>onDrop = (e, folderId) =&gt; {
      e.stopPropagation();
      e.preventDefault();
      var files = this.fileListToArray(e.dataTransfer.files);
      this.setState({
          dragActive: false,
          uploadFiles: files
      }, () =&gt; {
          this.uploadFiles(folderId);
      });
  }
  </code></pre>