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

If your props are updating then better to use

componentWillReceiveProps(nextProps) {
  this.props.data = nextProps.data;
}

react will render the component when state changes so you can use

this.setState(this.state)

If you want to update your render() method reads from something other than this.props or this.state, you'll need to tell React when it needs to re-run render() by calling

forceUpdate()

Answer 2

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.