React JS State Validation Issue

Tags: #<Tag:0x00007efc6216e468>
#1

Using Handson Table with react wrapper, on state change of the parent component, validation is reset. So if I enter E into a number field and then add a row the highlighting vanishes.

Currently attempting to fix this issue and in the the process make it possible to track the spreadsheets overall validation status without loosing the baked in validation in the process. So that I can add a row and maintain the validation but also have a button in the parent component (which hasn’t got access to the hot instance) disabled if there are any invalid cells.

Have seen this mentioned before in the below posts:
React Setstate Issue With Validation
React Setstate Issue With Aftervalidate

Though I took out the afterChange on these examples and the table doesn’t seem to behave any differently, I did notice the console log in the onAfterValidate doesn’t actually run and struggled to find that method in the docs. In my examples I ended up using afterValidate.

Currently working on implementing the suggestion as it seems to be the same in each. My issue is handling the validation manually could cause issue down the line if handson tables core code is changed and require a rewrite from us, also that even with the code provided I am still seeing issues.

Here is a codepen example of how my use case is set up.
Handson Table Validation Example

Farrah

#2

Hi @farrah

Have you checked that tip https://github.com/handsontable/react-handsontable/issues/132?

#3

Sorry took me a bit to reply, saw your comment and got a bit distracted looking into it. Might be what I need, in middle of trying to get it into my code now. Let you know how it goes.

Thanks for the quick reply.

#4

Hi,

Based on the git issues you linked I came up with the following solution that works for me Handson Table Validation Example V2

However if I remove line 77 ( setSheetValid({ status: false, errors: [] }); ) on child.js then it the setSheetValid doesn’t update the state in the parent component and it stops working. I have some console.logs in currently to show the afterValidate running before the afterChange which calls the function to update the sheetValid state. Would you be able to explain why it works with this but not without?

Farrah

#5

Hi Farrah,

I will need to confirm one thing with our Developer Advocate will update you on this task.

#6

HI Aleksandra,

Thanks for the reply might have got this figured out now. Just updating now but I think it was needed because I was using a reference to a state object to update state. Will keep you posted and when I do get this working will post a final sandbox just incase anyone else stumbles upont his post. Appreciate the help so far.

#7

Hi Farrah,
In your example, setSheetValid which is a representation of React Hook, is necessary to reflect changes between Handsontable and React components.
Both Handsontable and React have their own lifecycle of components, without invoking react hooks (changing state) in Handsontable hooks, React doesn’t know that has to re-render components.

By the way, in your example, I see you store TD elements of invalid cells by reference to the element. It might be risky if virtual rendering in Handsontable will drop unnecessary TD elements (after scroll). Then in Set() you will still keep a reference to elements which might run to the memory leak.

If you have to store invalid cells, it’s better to keep them in Set() by its IDs like ${hotId}_r${row}_c${column} or in Map() to store cells id with theirs error message. That should help eliminate potential memory leak.

#8