title: Call method on ES6 class instance of React.Component
body: <p>I'm brand new to React and I'm using it in combination with ES6 classes. I have a class that inherits from <code>React.Component</code> and renders DOM based on a single property in its <code>state</code>. Here's how that looks:</p>
  
  <pre><code>class LoadingScreen extends React.Component {
    constructor(props) {
      super(props);
      this.state = { state: 'isHidden' };
  
    showTrying() {
      this.setState({ state: 'isTrying' });
    }
  
    hideAll() {
      this.setState({ state: 'isHidden' });
    }
  
    render() {
      switch (this.state.state) {
  
      case 'isHidden':
        return null;
  
      case 'isTrying':
        // Returns a bunch of DOM elements
    }
  }
  </code></pre>
  
  <p>In a parent class, that is not a React component (I'm attempting to migrate existing code that uses no framework), I want to:</p>
  
  <ol>
  <li>Create an instance of <code>LoadingScreen</code></li>
  <li>Call <code>React.render</code> to insert it in the DOM</li>
  <li>Call methods such as <code>hide</code> or <code>showTrying</code> on that instance to update its state</li>
  </ol>
  
  <p>I've tried:</p>
  
  <pre><code>this.loadingScreen = new LoadingScreen();
  React.render(this.loadingScreen, mountNode); // React invalid component error
  
  // Later on...
  this.loadingScreen.showTrying();
  </code></pre>
  
  <p>And also tried:</p>
  
  <pre><code>this.loadingScreen = React.render(React.createElement("LoadingScreen"), mountNode);
  
  // Later on...
  this.loadingScreen.showTrying(); // Undefined is not a function
  </code></pre>
  
  <p>Clearly I'm missing something fundamental here. :)</p>