title: Setting React Props, state from Jquery Tree event
body: <p>I am new to "React" world. On my project, now I started using react on my exisiting .NET MVC projects. The issue I face now is, I have Jquery/JS based tree which is populated from  a react class component's "ComponentDidMount()" . There is an "on select" event for this JS tree(third party JS plugin), from which i need to set the "state" and "props" of that component. Some how I unable to call React component's eventHandler from JQuery tree's "select" event.  Please help.</p>
  
  <pre><code>import React, { Component } from 'react'
  
  class ReportsTree extends React.Component {
  
      constructor(props) {
          super(props)
  
          this.handleTreeNodeSelect = this.handleTreeNodeSelect.bind(this);
      }
  
  
  
      componentDidMount() {
          var tree = this.loadReportsTree();
  
          tree.on('nodeDrop', function (e, id, parentId, orderNumber) {
  
              // console.log("ID : " + id + " Parent :" + parentId + " OrderNumber :" + orderNumber);
  
              if (parentId != undefined &amp;&amp; parentId.indexOf('R') &gt; -1) {
                  return false;
              }
          });
  
          tree.on('nodeDataBound', function (e, node, id, record) {
              //console.log(record)
              if (record.parentid === null || record.parentid === '') {
                  tree.expand(node);
              }
          });
  
          tree.on('select', function (e, node, id) {
  
              this.handleTreeNodeSelect(id); //THIS LOC IS NOT WORKING - Unable to find handleTreeNodeSelect event handler
          });
      }
  
      state = {
  
          id: ''
  
      }
  
      handleTreeNodeSelect = (_id) =&gt; {
          this.props.NodeTypeDetails(this.state.id = _id);
          this.setState(() =&gt; { return { id: _id } });
      };
  
  
  
      loadReportsTree() {
  
          var tree = $('#ssrTree').tree({
              uiLibrary: 'bootstrap',
              dataSource: '/GetReportItems',
              primaryKey: 'id',
              imageUrlField: 'imageUrl',
              dragAndDrop: true,
  
          });
  
          return tree;
  
  
  
      }
  
  
  
      render() {
          return (&lt;div className="reportsTreeContainer"&gt;
              &lt;div id="ssrTree"&gt;&lt;/div&gt;           
          &lt;/div&gt;)
      }
  }
  
  export default ReportsTree
  </code></pre>