React-rails: Child component is not rerendering on state change in ajax response from parent component

[dspoonia7]

I am using es6 syntax. The child (DataTable) component is not rerendering (updating) after state change in ajax call response in parent component.`

    class DataTable extends React.Component {
      constructor(props) {
        super(props);
        this._dataList = this.props.data;
        this._defaultSortIndexes = [];
        var size = this._dataList.length;
        for (var index = 0; index < size; index++) {
          this._defaultSortIndexes.push(index);
        }
        this.state = {
          sortedDataList: this._dataList
        };
      }
      render() {
        var {sortedDataList, colSortDirs} = this.state;
        return (
          <Table
            rowHeight={50}
            rowsCount={sortedDataList.length}
            headerHeight={50}
            width={1300}
            height={500}
            {...this.props}>
            <Column
              columnKey="created_by"
              header={
                <SortHeaderCell
                  onSortChange={this._onSortChange}
                  sortDir={colSortDirs.created_by}>
                  Created By
                </SortHeaderCell>
              }
              cell={<TextCell data={sortedDataList} />}
              width={200}
            />
          </Table>
        );
      }
    }

    class ActivityLog extends React.Component {
      constructor(props) {
        super(props);
        this.state = { 
          data: [] 
        };
      }

      getActivityLogData = () => {
        var params = {
          start: "2016-03-01",
          end: "2016-03-15"
        }
        var self = this;
        $.ajax({
          url: '/activity_log/stats',
          method: 'POST',
          data: params,
          beforeSend: (xhr) => {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
          success: (response) => {
            self.setState({data: response});
          }
        });
      }

      componentDidMount() {
        this.getActivityLogData();
      }

      render() {
        return (
          <div><DataTable data={this.state.data} />
        );
      }
    }
    module.exports = ActivityLog;

[rmosolgo]

DataTable sets its state during the constructor, so it's right for the first render. But on subsequent renders, DataTable receives new props. constructor is not called again, so state is not updated.

I use createClass, so I would use componentWillReceiveProps, I don't know the class-based equivalent!

[dspoonia7]

Hey @rmosolgo, Actually componentWillReceiveProps is working with es6 classes also. I added this to child component and it worked fine.

componentWillReceiveProps(nextProps) {
    this.setState({sortedDataList: nextProps.data});
  }

Thanks :)

[dspoonia7]

But now I am getting this error Uncaught Invariant Violation: Minified React error #119
Any idea?

[rmosolgo]

I don't see any refs in the above code, so maybe one of the child components is creating a ref?

[dspoonia7]

Sometimes I am also getting this error

Uncaught TypeError: Cannot read property 'releaseMouseMoves' of undefined

I think this is multiple copies of react loaded issue. Is there any way to know if react is loading multiple times and if it is, then how can i resolve this?

[rmosolgo]

any way to know if react is loading multiple times

yes, here are a couple of approaches:

• look at your build process (or _processes_) are you using webpack and/or sprockets? if you're using both, make sure they're sharing a copy of React, not each one importing a separate copy
• look at the assets you're bundling -- for example, do any of your 3rd party libraries have a copy of React _inside_ them?

[rmosolgo]

I hope you found something that worked for you!