ES6 with React, can't setState - 'Cannot read property 'setState' of undefined'?
<p>I was working off a react drag and drop tutorial that was done for ES5, but I'm working with ES6.</p>

<p>Here's my code:</p>

<pre><code>  class Song extends React.Component{
    constructor(props){
      super(props);
      this.state = {isPlaying:false,dragMode:editMode == 1 ? true : false,eligibleToDrag: false};
      //this.dragStart = this.dragStart.bind(this);
    }

    _clickAction(){

      if(this.state.dragMode == false){
        changeSong(this.props.arrIndex); 
        playSong();
      }
    }

    dragStart(e){
      Array.prototype.forEach.call(document.getElementById('screen2').getElementsByClassName('track'),function(e1){
        if(e1.getAttribute('data-songid') == e.currentTarget.getAttribute('data-songid')){
          this.setState({eligibleToDrag: false});
          console.log('ELIGIBLE?',this.state.eligibleToDrag);

        }
        else{
          this.setState({eligibleToDrag: true});
          console.log('ELIGIBLE?',this.state.eligibleToDrag);
        }
      });
      console.log(this.state.eligibleToDrag);
      if(e.currentTarget.parentElement.parentElement.id=="screen"){
        e.dataTransfer.effectAllowed = 'link';
      }
      if(e.currentTarget.parentElement.parentElement.id=="screen2"){
        e.dataTransfer.effectAllowed = 'move';
      }
      draggedObject = e.currentTarget;
      e.dataTransfer.setData("text/html",e.currentTarget);
    }

    dragEnd(e){

    }

    dragOver(e){
      e.preventDefault();
      var relY = e.clientY - e.target.offsetTop;
      var height = e.target.offsetHeight / 2;
      if(e.target.parentNode.parentNode.id == 'screen2'){
        if(relY &gt; height){
          e.target.parentNode.insertBefore(draggedObject,e.target.nextElementSibling);
        }
        else if(relY &lt; height){
          e.target.parentNode.insertBefore(draggedObject,e.target);
        }
      }
      if(e.target.parentNode.parentNode.id == 'screen' &amp;&amp; draggedObject.parentNode &amp;&amp; draggedObject.parentNode.parentNode.id == 'screen2'){
        draggedObject.remove();
        //e.stopPropagation();
      }
      return;

    }
    render(){
      var isDragMode = this.state.dragMode == true;
      if(isDragMode){
        document.getElementById('screen').classList.add("drag");
        document.getElementById('screen2').classList.add("drag");
      }

      return &lt;div data-songid={this.props.trackInfo.Id} onClick={this._clickAction.bind(this)} className={"track"} draggable={isDragMode ?  "true": "false"} onDragEnd={isDragMode ? this.dragEnd.bind(this) : ''} onDragOver={isDragMode ? this.dragOver.bind(this) : ''} onDragStart={isDragMode ? this.dragStart.bind(this) : ''}&gt;
        &lt;span draggable={"false"}&gt;{this.props.trackInfo.Title}&lt;/span&gt;&lt;br draggable={"false"} /&gt;
        &lt;span draggable={"false"}&gt;&lt;i draggable={"false"}&gt;{this.props.trackInfo.Artist}&lt;/i&gt;&lt;/span&gt;
      &lt;/div&gt;
    }

  }
</code></pre>

<p>The class works until I add that Array.prototype.forEach.call section on dragStart(e). It then starts giving me "Cannot read property 'setState' of undefined" in the console, pointing to that section. I'm not sure what I'm missing because to my knowledge I've binded everything in the render method. My guess is that I <em>haven't</em> binded everything, but I'm not sure what else to do.</p>