# Referencing the Handsontable instance in React

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import Handsontable from 'handsontable';

const hotSettings = {
  data: Handsontable.helper.createSpreadsheetData(4, 4),
  colHeaders: true,
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
};

const App = () => {
  const hotTableComponent = useRef(null);

  const swapHotData = () => {
    // The Handsontable instance is stored under the `hotInstance` property of the wrapper component.
    hotTableComponent.current.hotInstance.loadData([['new', 'data']]);
  };

  return (
    <div className="controls">
      <HotTable ref={hotTableComponent} settings={hotSettings}/>
      <br/>
      <button onClick={swapHotData}>Load new data!</button>
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('example1'));