title: Binding the React component to a Handontable instance
body: <p>After <code>react-handsontable</code> was upgraded to version 1.0.0, I'm not quite sure how to bind the React component to a Handsontable instance, since <code>Handsontable</code> is now a peer dependency, and no longer part of the React wrapper, and so it can't be accessed by a reference anymore.</p>
  
  <p>The <code>react-handsontable</code> docs show how to render the <code>Handsontable</code> component:</p>
  
  <pre><code>render() {
    return (
      &lt;div id="hot-app"&gt;
        &lt;HotTable data={this.data} colHeaders={true} rowHeaders={true} width="600" height="300" stretchH="all" /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>And the Handsontable Core API reference shows how to call its methods:</p>
  
  <pre><code>var ht = new Handsontable(document.getElementById('example1'), options);
  </code></pre>
  
  <p>So I tried adding an ID to the React component and creating a new instance of <code>Handsontable</code> that references that element, but it just ends up rendering another table:</p>
  
  <pre><code>componentDidMount() {
    const hot = new Handsontable(document.getElementById('hot'));
    // hot.countCols();
  }
  
  render() {
    return (
      &lt;React.Fragment&gt;
        &lt;HotTable id="hot" settings={...} /&gt;
      &lt;/React.Fragment&gt;
    );
  }
  </code></pre>
  
  <p>How can I use the Core API methods with the rendered component? I've also <a href="https://github.com/handsontable/react-handsontable/issues/75" rel="nofollow noreferrer">raised an issue</a> in an attempt to improve the docs.</p>