title: Change state of React component from old external Javascript?
body: <p>How can I change the state of a React component from my old legacy jQuery soup
  code?</p>
  
  <p>I have a component like this:</p>
  
  <pre><code>var AComponent = React.createClass({
    getInitialState: function() {
      return { ids: [] }
    },
    render: function() {
      ...
    },
    onButtonClick: function() {
      ids.splice(…); // remove the last id
    }
  });
  </code></pre>
  
  <p>When something special happens in the old jQuery soup code, I'd like to
  push an id to <code>AComponent.state.ids</code>. How can I do that?</p>
  
  <p>One "obvious" solution is an anti-pattern; here it is:</p>
  
  <pre><code>var componentInstance = AComtonent({});
  React.renderComponent(componentInstance, document.getElementById(...));
  
  // Somewhere else, in the jQuery soup. Something special happens:
  componentIntance.state.ids.push(1234);
  componentIntance.setState(componentInstance.state);
  </code></pre>
  
  <p>This is an antipattern, according to <a href="https://groups.google.com/d/msg/reactjs/pyUZBRWcHB4/4gnxlVQZF0MJ" rel="noreferrer">this email from a Facebook
  developer</a>,
  because he writes that <code>componentInstance</code> might be destroyed by React.</p>