I have a component that calls a 3rd party component called ReactCollapsingTable
which looks like this:
export class MyComponent extends Component <DataTableProps, {rows: any, columns: any} > {
constructor(props: DataTableProps) {
super(props);
this.state = {rows: this.getRows(), columns: this.getColumns() };
}
getRows() {
...
return rows;
}
getColumns() {
...
return columns;
}
componentDidUpdate(prevProps: Readonly<DataTableProps>): void {
if (!_.isEqual(this.props, prevProps)) {
this.setState({rows: this.getRows(), columns: this.getColumns() });
}
}
render() {
return <ReactCollapsingTable
rows={this.state.rows}
columns={this.state.columns}
/>;
}
}
When my component updates it changes the values of this.state.rows
and this.state.columns
with this.setState
. In my render
function I am logging the values of this.state.rows
and this.state.columns
to the console and they are changed as expected. However the ReactCollapsingTable
does not change. Am I doing something wrong or is it that component? If that's the 3rd party's component fault, is there a work around? Maybe unmount it and put back again, or something along these lines. Thank you.
Apparently, this is caused by the 3rd party component. Trying a different version of that library, fixed my problem. Also, using a different library I am not getting this issue either.