Search code examples
reactjsreact-component

3rd party React component not updating


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.


Solution

  • 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.