Have you ever experienced react-table not updating when there was a change in state data? This is not because of a bug / error in the react-table library, but note the following things that might result in data not updating in react-table.
- mutate state directly
- accidentally duplicated array of objects in a state in the wrong way.
In essence, we make changes to the state without calling the setState process.
For example :
1 2 3 4 5 6 | const deleteData = ()=>{ let array_of_data = this.state.array_data; // this process will copy the array of object with reference array_of_data.splice(index, 1); this.setState({array_data : array_of_data}); } return |
The example above causes the state to be immune. Make sure we avoid the above method by doing the right process.
See the following example, we are duplicating the object array in Javascript the right way :
1 2 3 4 5 | let array_of_data = this.state.array_data.map((object) => ({ ...object, })); // the right way copy the array of object without reference array_of_data.splice(index, 1); this.setState({array_data : array_of_data}); |
If you still can’t find an error in the code that causes react-table not to update / refreshing the data, use the following steps to force react-table to make changes to the data :
1 2 3 4 5 6 7 8 9 | this.setState({ array_data: [] }, () => { this.setState({ array_data: newData }); } ); |
How to quickly create a table in reactJS ? read this post : The Using Of React-Table, Suitable For Beginners
Some helpful references:
- https://daveceddia.com/why-not-modify-react-state-directly/
- https://stackoverflow.com/questions/67262545/why-is-my-react-table-not-updating-the-data
Good luck.
Leave a Reply