React-table: data not updated dynamically

[hitman99]

Problem Description

When changing data (for data prop), it is not reflected in the table. Neither addition nor deletion of tada works. Complete page refresh is required to display the correct data.
When state changes (adds or removes rows_, it is not reflected in the table

Code Snippet(s)

alter_rows(){
  let table = this.state.table;
  table.data.splice(0, 1);
  table.data.push({
    name: 'dummy',
    actions: 2,
    created: '2099-02-02 01:01:01',
    updated: '2099-02-02 01:01:01'
  });
  this.setState({ table });
}

render(){
<ReactTable
  showPagination={false}
  defaultPageSize={10}
  className="-highlight"
  data={this.state.table.data}
  columns={this.state.table.columns}
  loading={this.state.loading}
/>
}

Steps to Reproduce

1. Put snipped in your React component
2. Run component with initial data, then change the data
3. Observer that the data is not changed in the table

System Information

Browser Version: Chrome 56 & FF52
OS version: Windows 10 Enterprise
NPM Version: 3.6.0

[hitman99]

I found a workaround, this seem to update the data:

let table = this.state.table;
table.data.splice(0,1);
// remove all data from table
this.setState({
  table: {
    data: [],
    columns: table.columns  
  }
 });

// Add data to the table again, this somehow refreshes it
this.setState({ table });

[edward93]

@hitman99 this is very nice, thank you for that Tho I had to modify your solution a lil bit to make it work for me. But I hope there is some better solution for this or at least it's on it's way.
Here is my code:

let table = this.state.table;
table.data.splice(0,1);
// remove all data from table and add it back after it is done.
this.setState({
  table: {
    data: [],
    columns: table.columns  
  }
 }, () => this.setState({ table }));

[aaronschwartz]

I think the problem may be that you're mutating state directly. This is not correct React code.

The proper way to write this would be something like:

alter_rows() {
    let newData = [...this.state.table.data];
    newData.splice(0, 1);
    newData.push({
        name: 'dummy',
        actions: 2,
        created: '2099-02-02 01:01:01',
        updated: '2099-02-02 01:01:01'
    });
    this.setState({
        table: {
            ...this.state.table,
            data: newData
        }
    })
}

See:
https://medium.com/pro-react/a-brief-talk-about-immutability-and-react-s-helpers-70919ab8ae7c
and
https://facebook.github.io/react/docs/state-and-lifecycle.html#using-state-correctly

[edward93]

@TacticalCoding Sorry but I don't see how I'm mutating state directly I alter it by calling setState just like you. Also the thing is that I can see that the render method is called and the data is actually changed and it should show the updated result but it doesn't. So the problem is not related to mutating state incorrectly I believe.

[edward93]

@TacticalCoding ohhhh I'm terribly sorry I just saw the issue. Thanks my bad.

[hitman99]

@TacticalCoding I see what you mean. Since I switching languages a lot, I forgot that I need to clone the array before altering it. Anyhow, spread operator does not work for objects:

This won't work:

this.setState({
        table: {
            ...this.state.table,
            data: newData
        }
    })

But this will:

this.setState({
        table: {
            columns: this.state.table.columns,
            data: newData
        }
    })

Closing ticket as I resolved it with proposed code change. Thanks.