[REACT-195] React - setting state with useState in column renderer throws error

Tags: #<Tag:0x00007f0aff4d7388> #<Tag:0x00007f0aff4d7220>

Hello,

I’m trying to update a variable that was create using useState() from within a column renderer function. It throws an error (screenshot attached). Here is a codesandbox to show the behavior after changing a value in a cell in column B, https://codesandbox.io/s/handsontable-usestate-error-vgmns. Can someone guide me as to what I’m doing wrong?

Thanks!

Hi @apfister

Thank you for sharing the demo. I’m on the case and will update you shortly.

I’m back with news. This issue should be investigated (it might be related to lack of definition in the .ts file).

However, I wanted to update you with a possible workaround.

https://codesandbox.io/s/handsontable-usestate-error-forked-belwm?file=/src/App.js.
If I set colWidths={100} I do not have this issue. Please confirm if it works for you.

Thank you @aleksandra_budnik this does seem to be a work-around.

I’m now also seeing another issue with using useState() from within a validator function. Can you take a look?

  • Change cell A1 to “1”
  • Change cell A2 to “-9”
  • values are reset after A2 is marked invalid

Thank you for sharing. I will test this demo today.

Please let me know if this demo works for you https://codesandbox.io/s/handsontable-usestate-validator-forked-9y55p?file=/src/App.js @apfister

This does work. So the guidance on this would be you have to use a variable created with useState() for the data property on the HotTable component if you wish to make any other setState-type calls in the Grid hooks/events?

Thank you again.

This subject is still under investigation but it seems to be a suitable workaround for now.

The main issue has been reported on our Github issue board Custom renderer without specifying colWidths terminates with an error (React Hooks) handsontable/react-handsontable#195

@apfister I will notify you once it is solved.

this is great, thank you so much.

a few examples of using the table with react hooks in different situations or best practices would be very helpful for developers. just a suggestion :slight_smile:

Thank you for the proposition. I can see a similar topic reported here https://github.com/handsontable/docs/issues/118
If you’d like us to cover some scenarios please feel free to add a comment :slight_smile: