How to force reactJS to redraw?

Question

I am trying to update my table with a ajax call by using this.setState({ data: data }); but the datatable is not redrawn with the new data? (I can see that new data is received)

var GridRow = React.createClass({
    render: function() {
        var data = [], columns;

        if(this.props.columns){
            for(var i = 0; i < this.props.columns.length; i++){
                data.push({
                    HTMLclass: this.props.columns[i].HTMLClass,
                    content: this.props.cells[i]
                })
            }
        }


        columns = data.map(function(col, i) {
            return (
                <td className={col.HTMLclass} key={i}>{col.content}</td>
            );
        }.bind(this));

        return (
            <tr>
                {columns}
            </tr>
        );
    }
});
var GridHead = React.createClass({
    render: function() {
        if(this.props.data){
            var cell = this.props.data.Title;
            var htmlClass = this.props.data.HTMLClass;
        }
        return (
            <th className={htmlClass}>{cell}</th>
        );
    }
});
var GridList = React.createClass({
    render: function() {
        var tableClass = this.props.tableClass;
        if(this.props.data){
            var header = this.props.data.Columns.map(function (columns, i) {
                return (
                    <GridHead data={columns} key={i} />
                );
            });
            var row = this.props.data.Rows.map(function (row, i) {
                return (
                    <GridRow columns={data1.Columns} cells={row.Cells} key={i} />
                );
            });
        }
        return (
            <table className={tableClass}>
                <tr>{header}</tr>
                <tbody>
                    {row}
                </tbody>
            </table>
        );
    }
});


var GridPager = React.createClass({
    handleClick: function(e) {
        e.preventDefault();
        this.props.onPaging();
    },
    render: function() {
        return(
            <a href='#' onClick={this.handleClick}>Paging</a>
        );
    }
});

var gridPage = 0;

var GridBox = React.createClass({
    loadCommentsFromServer: function() {
        var xhr = new XMLHttpRequest();
        gridPage++;
        xhr.open('get', this.props.url + '/?pageNr=' + gridPage, true);
        xhr.onload = function() {
          var data = JSON.parse(xhr.responseText);
          this.setState({ data: data });
        }.bind(this);
        xhr.send();
    },
    handlePaginSubmit: function(comment) {
        this.loadCommentsFromServer();
      },
    getInitialState: function() {
        return { data: this.props.initialData };
    },
    render: function(){
        var tableClass = this.props.tableClass;
        return (
            <div>
                <GridList data={this.state.data} tableClass={tableClass} />
                <GridPager onPaging={this.handlePaginSubmit} />
            </div>
        );
    }
});

Answer 1

that = this
xhr.onload = function() {
  var data = JSON.parse(xhr.responseText);
  that.setState({ data: data });
}.bind(this);

In your code this is the context of the callback method where setState method is not available, but it's a callback and you don't get an error about it. Use the trick listed above so you have a reference to the right context.

setState() in react js ALWAYS causes rerender.