title: React, update state on an event from a third party control
body: <p>I have a react component <code>InfoPanel</code> that I want to update the state of when I click on a third party control <code>gantt chart</code>. I have only done this with flux to allow components to communicate with each other. I am not sure how to change the state of the <code>InfoPanel</code> Component when the third party control event <code>onTaskClick</code>fires.</p>
  
  <p>Here is the event that fires for the third party control.</p>
  
  <pre><code>class InfoPanelService {
      constructor() {
          this.InitInfoPanel();
  
      }
  
      OnTaskClick() {
          //event from a third party control
          gantt.attachEvent("onTaskClick", function (id, e) {
              var tasks = gantt.getTaskByTime();
              var task = tasks[id];
  
              //determine the task type and get the data
  
              return true;
          });
      }
      InitInfoPanel() {
          this.OnTaskClick();
      }
  }
  </code></pre>
  
  <p>Here is my <code>InfoPanel</code> component</p>
  
  <pre><code>var InfoPanel = React.createClass({
      getInitialState: function () {
          return { data: {
              project: {},
              subProject: {},
              activity: {}
          } };
      },
  
      render: function() {
          return (&lt;div&gt;
                      ...tables with the state values
                      ... too long to post
                 &lt;/div&gt;
  
            );
      }
  </code></pre>
  
  <p>});</p>
  
  <p>Should I add something like this to my component? <code>&lt;InfoPanel OnTaskClick = infoPanelService.OnTaskClick</code> /> instead of attaching the event right away inside of the constructor and pass in that function from the service as props? This way the component is completely dumb and I can easily throw it and reuse it.</p>
  
  <pre><code>onResourceSelect() {
      this.props.OnTaskClick();
  },
  </code></pre>