React table- doesn't refresh content

Question

I am trying to refresh content in the table generated with this library react-table. However, for some reason, it doesn't work, even though I change the state of the parameter which I pass to the Component.

<ReactTable
   data={this.state.data}
   columns={this.state.headers}
/>

And the function which changes data:

  let data= this.state.data;
  for (var i = 0; i < data.length; i++) {
    data[i].name="TEST"
  }
  this.setState({data: data})

I can see that the data has changed but the content of the table stays the same.

As a suggestion, do not assign your state data into a variable like that. Use Object.assign or spread syntax: let data = [ ...this.state.data ] Also, do not change a key's value like that, since if you change with this way, your original object mutates, too. Use .map as suggested @Shishir Arora's answer. This applies to spread syntax since it makes a shallow copy. — devserkan
– devserkan, Commented Aug 19, 2018 at 22:43

Shishir Arora · Accepted Answer · 2018-08-19 22:27:21Z

12

let data= this.state.data;
const newData = data.map(d=>({...d, name:"Test"}));
this.setState({data: newData})

Use above code. Reason: React does not see mutation.

answered Aug 19, 2018 at 22:27

Shishir Arora

5,9934 gold badges33 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React table- doesn't refresh content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related