1

Code: https://codesandbox.io/embed/react-table-editable-content-ggvcy

When I update the text in my table and I have an onBlur event to persist that data change to state I want my user to click a save button the save button click is missed.

I believe it is missed because the table is refreshing due to the state change of data.

Can anybody help me understand ways to capture the onClick event when it triggers the onBlur rerender?

Quinma
  • 1,436
  • 2
  • 17
  • 39
  • I think that it might be the same issue as in https://stackoverflow.com/a/57419587/3877913 what happens when instead of using the component ReactTable you try using the hook useTable. You can take another look at the hook example here https://github.com/tannerlinsley/react-table/blob/5145a632c944d135863d8a2f14a160a2f9395f61/examples/editable-data/src/App.js#L90 – Marouane Fazouane Aug 09 '19 at 18:55
  • Also note that you might need to use react-table v7 which is still in alpha if you want to use hooks. v6 don’t play well with hooks https://www.npmjs.com/package/react-table/v/7.0.0-alpha.21 – Marouane Fazouane Aug 09 '19 at 19:11

1 Answers1

0
const updateCellData = (idx, id, value) => {
    console.log(`idx: ${idx}, id: ${id}`);
    const newData = [...data];
    newData[idx][id] = value;
    console.log(`prev: ${data[idx][id]}, new: ${newData[idx][id]}`);
    // setData(newData);
};

I realized that i am mutating the state because i am not deep copying the object. Strangely this works for my use case since my data is server side and it updates as needed but I would never recommend directly mutating the state.

Quinma
  • 1,436
  • 2
  • 17
  • 39