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.

Answer 1

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.