title: How to Attach Drag & Drop Event Listeners to a React component
body: <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>