Reactjs With Handsontable cell validation function is not invoking - reactjs

Question

I have declared cell validation function but in cells property but it is not getting invoked and no error is also thrown
I have declared the function definition as member function and trying to call it from componentDidMount function
Also some suggestions regarding using handsontable with react would be great!
Below is my code
import React from 'react';
import Handsontable from 'handsontable/dist/handsontable';
let hot = {};
let columns = [];
let data = '';
class SpreadSheet extends React.Component {
constructor(props){
super(props);
this.state = {
data : [
{year: "2016", name: 'John', age: 23, contact: 8000142880},
{year: "2015", name: 'Doe', age: 22, contact: 9494858568},
{year: "2013", name: 'Jack', age: 21, contact: 7878989825},
{year: "2012", name: 'Joe', age: 20, contact: 9898454526},
]
}
columns = [
{ data: 'year', type: 'text' },
{ data: 'name', type: 'text' },
{ data: 'age', type: 'numeric' },
{ data: 'contact', type: 'numeric' }
]
}
getData = () => {
var datafromtable = document.getElementById('foo');
//console.log(datafromtable);
data = hot.getData();
console.log(data);
}
negativeValueRenderer = () => (instance, td, row, col, prop, value, cellProperties) => {
console.log('arguments');
//Handsontable.renderers.TextRenderer.apply(this, arguments);
//return;
}
componentDidMount() {
var container = document.getElementById('foo');
hot = new Handsontable(container, {
data: this.state.data,
minSpareCols: 1 ,
minSpareRows: 1,
minCols: 5,
minRows: 5,
rowHeaders: true,
colHeaders: ['Year','Name','Age','Contact'],
columns: columns,
cells: function (row, col, prop) {
console.log(this);
this.renderer = this.negativeValueRenderer;//not getting triggered
},
contextMenu: true
});
}
render() {
return (
<div>
<div id="foo"></div>
<button onClick = {this.getData}>Get Data</button>
{data}
</div>
);
}
}
export default SpreadSheet;

Answer 1

Are you trying to apply the negativeValueRenderer to each cell, or just the Age column?
Give this a shot:
constructor(props) {
super(props);
this.negativeValueRenderer = this.negativeValueRenderer.bind(this);
}
...
negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
renderers.NumericRenderer.apply(this, arguments);
if (parseInt(value, 10) < 0) {
td.style.color = 'red';
}
}
...
hot = new Handsontable(container, {
data: this.state.data,
minSpareCols: 1 ,
minSpareRows: 1,
minCols: 5,
minRows: 5,
rowHeaders: true,
colHeaders: ['Year','Name','Age','Contact'],
columns: columns,
columns={[
{
data: 'year',
},
{
data: 'name',
},
{
data: 'age',
validator: this.negativeValueValidator,
},
{
data: 'contact',
},
contextMenu: true
});