How to Attach Drag & Drop Event Listeners to a React component
<p>I'm building a component that allows local files to be dragged and dropped on a div. Then there's an output of information about the dropped file.</p>

<p>My problem is I don't know how to properly attach the event listeners <code>drop</code> and <code>dragover</code> when creating my component. </p>

<p>My App component is where all where all my logic is (handler for drop and dragover) and I created a separate component where files will be dropped on - dropZone component.</p>

<p>I tried putting the event listener on the dropZone tag on my App component with a <code>componentDidMount</code> where if my dropZone component had been rendered put an event listener on it:</p>

<pre><code>componentDidMount(){
      const dropZone = document.getElementById('dropZone');
      dropZone.addEventListener('dragover', this.allowDrop.bind(this))
      dropZone.addEventListener('drop', this.dropHandler.bind(this))
    } 
</code></pre>

<p>this didn't work</p>

<p>I then tried putting it in my dropZone tag that lives on my app component:</p>

<pre><code>&lt;DropZone dropZone = {"dropZone"} onDragOver = {this.allowDrop.bind(this)} 
 onDrop ={this.dropHandler.bind(this)} &gt;      
&lt;/DropZone&gt;
</code></pre>

<p>this didn't add an event listener to dropZone either. I've tried a couple of other things but these are the ones that I though should've worked.</p>

<p>So my questions are, </p>

<ul>
<li><p>how do I add the <code>drop</code> and <code>dragover</code> event listeners to dropZone?</p></li>
<li><p>Should I be adding these event listeners on App and passing them to dropZone component as a prop? Or is no passing down even necessary</p></li>
<li><p>Or should I be adding the event listeners on dropZone directly and so my event handler functions live in the dropZone component? </p></li>
</ul>