title: React component + jQuery draggable thinks every element is the same object
body: <p><em>Disclaimer: React noob over here - I apologize if I'm bastardizing the way it's meant to be used.</em></p>
  
  <p>I'm trying to use jQuery's draggable API in conjunction with React components. However, whenever I drag the list item, the object associated to the drag event is the same.</p>
  
  <pre><code>class CompanyListItem extends React.Component {
    componentDidMount() {
      that = this
      $("[role='draggable']").draggable({
          start: (e, ui)=&gt; {
            that.props.dragHandler(event, ui, this);
          },
          revert: true
      });
    }
  
    render() {
      return (
        &lt;li className="draggable company" id={this.props.company.id} role="draggable"&gt;
          &lt;span&gt;{this.props.company.name}&lt;/span&gt;
        &lt;/li&gt;
      );
    }
  }
  
  class CompanyList extends React.Component {
    render() {
      var rows = []
  
      _.each(this.props.companies, (company) =&gt; {  
        rows.push(&lt;CompanyListItem company={company} dragHandler={this.props.dragHandler} key={company.id}/&gt;);
      });
  
      return (
        &lt;ul&gt; Select
          {rows}
        &lt;/ul&gt;
      );
    }
  }
  </code></pre>
  
  <p>For example, the component rendered below:</p>
  
  <p><a href="https://i.stack.imgur.com/1RQYN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1RQYN.png" alt="enter image description here"></a></p>
  
  <p>The object tied to both list elements is the "HopShop" (the first rendered list item)</p>