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

Getting help Issues
,
1

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, handsontable-useState-error - CodeSandbox. Can someone guide me as to what I’m doing wrong?

Thanks!

image
image776×575 61.3 KB

2

Hi @apfister

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

3

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.

4

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
5

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

6

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

7

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.

8

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

9

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.

10

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:

11

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: