Search code examples
reactjshandsontable

ReactJS: Handsontable Cell Data Clearing after Rerender

Im implementing Handsontable (https://handsontable.com/docs/) into one of my projects however im encountering an issue where when my button onClick function fires, it causes a rerender and all the cell data that was inserted into the Handsontable becomes deleted.

<HotTable
  ref={hotTableComponent2}
  data={[]}
  colHeaders={['Case ID', 'Name']}
  rowHeaders={true}
  width="100%"
  columnHeaderHeight={35}
  rowHeights={30}
  manualColumnResize={true}
  persistentState={true}
  stretchH="all"
  minSpareRows={1}
  licenseKey="non-commercial-and-evaluation"
/>

<Button onClick={() => SubmitFunction()}>Submit</Button>

Any ideas on how to prevent the table from deleting the cell data on rerender?

TIA

EDIT

After further investigation, it seems that the button state (setButtonLoading(true)) that fires in the SubmitFunction() is responsible for deleting data captured in the HandsonTable.

https://codesandbox.io/s/relaxed-neumann-08euk?file=/src/App.js

Solution

  • The problem is that when you are editing the cells, you are not saving them in state and passing blank array in data object in table props. When it rerender it has only blank array.

    What to do? You need to create a state and save data that you enter in column in that state. So it will be saved and pass that in your data prop. Now if it will rerender the data will be fetched from state variable.

    Instead of data={[]} you should pass data={stateVariable}