Custom key for data to prevent wrong state after immutable update of the data

[omridevk]

Hi
I have an app:
https://github.com/omridevk/node-cleaner
When I render the table, at some point I change the state of the data in an immutable way, i.e I change one property of one item in the data and create the whole array.
This causes the selected state to get all confused since the keys are not related to my data AFAIK.
Is there any way that I can pass a key that can be used as a unique identifier for each row? and not the row_0 and row_1 , etc the library generates.
Awesome library by the way, V7 is freaking awesome!!!

[omridevk]

To clarify, I am not adding new data, I am modifying data of the table, using spread and creating a new array.

[omridevk]

can bump topics here?

[omridevk]

@tannerlinsley
Any idea how I can resolve this? should I just do a mutation to the row data instead of doing it by creating a new array? or am I missing some configuration that will allow me to pass custom key to the library which it can infer from my data. I tried adding key to my data, but it doesn't help.
Any help will be much appreciated.
I'll try to provide a minimal codesandbox example.

[omridevk]

the bug can easily be seen here:
https://github.com/omridevk/node-cleaner/tree/add_delete_status_for_projects

git clone https://github.com/omridevk/node-cleaner
cd node-cleaner
git checkout add_delete_status_for_projects
yarn
yarn dev-demo

then just delete any of the projects the app finds (it won't delete anything you can see in the code, in demo mode it just console.log instead of actually deleting any folders). but then you can see that I update the deleted row property
https://github.com/omridevk/node-cleaner/blob/add_delete_status_for_projects/app/hooks/useScan.tsx#L149
Here is where I immutability update the Data passed to the table, again, not adding anything, just modifying the status property of the object (creating a new one in the process as well).

I'd rather not do a direct mutation on the data if it is possible to avoid that.

[omridevk]

k, I think I found a solution:
using getRowId,
then pass it a callback

  const getRowId = React.useCallback(row => {
    return row.id
  }, [])

and there I can adjust the id to be my unique key in my data so when I change it property on it the table state is kept.
wish it was easier to find it.

[omridevk]

taken from this example:
https://github.com/tannerlinsley/react-table/blob/127a7fca8754f6289b6bc019dbd1fc4bcdd13187/examples/row-dnd/src/App.js#L43

[giranm]

I've been searching far and wide for a solution to this - thank you @omridevk ! ❤️

[lishine]

@omridevk
Do you use the react-table generated automatically keys?
How do you handle then the eslint react/jsx-key warning?
Do you also put /* eslint-disable react/jsx-key */ at the top of the file ?
Thanks

[omridevk]

I don't use eslint in this specific project at the moment so i am not sure