ReactJS - Handsontable - determine changes

Question

I am trying to get values of what has changed in react-handsontable Component I am using:

<HotTable root="hot"
                data={this.state.handsontableData}
                colHeaders={this.handsontableColumns}
                rowHeaders={true}
                width="1200"
                height="300"
                stretchH="all"
                colWidths={this.handsontableColWidths}
                onAfterChange={this.handleHOTChange(changes, source)} />

But, onAfterChange={this.handleHOTChange(changes, source)} throws error:

./src/MyComponent.jsx
  Line 73:  'changes' is not defined  no-undef
  Line 73:  'source' is not defined   no-undef

Can please someone tell me how can I get "changes" from event?

If I just use onAfterChange={this.handleHOTChange} without arguments then handleHOTchanges function gets invoked on change. But then how do I determine what has changed?

Answer 1

Ah, got this fixed:

Below is solution:

<HotTable root="hot"
                data={this.state.handsontableData}
                colHeaders={this.handsontableColumns}
                rowHeaders={true}
                width="1200"
                height="300"
                stretchH="all"
                colWidths={this.handsontableColWidths}
                onAfterChange={(changes, source) => this.handleHOTChange(changes, source)} />

Key was to use arrow function syntax: (changes, source) => this.handleHOTChange(changes, source)

and below is example handler function to print argument received in console:

handleHOTChange(changes, source) {
     alert('changed!');
     console.log(changes);
   }