Warning: Cannot update a component (`ForwardRef`) while rendering a different component (`AutoSizer`)

[monkeyArms]

I am having issues with the HTML5Table component when the data prop is updated.

Console error (Firefox):

react_devtools_backend.js:6:7472

Warning: Cannot update a component (`ForwardRef`) while rendering a different component (`AutoSizer`). To locate the bad setState() call inside `AutoSizer`, follow the stack trace as described in https://fb.me/setstate-in-render
    in AutoSizer (created by Measurer)
    in Measurer (created by ForwardRef)
    in div (created by ForwardRef)
    in ForwardRef
    in ForwardRef (created by Html5Table)
    in Html5Table (created by EditableTable)
{...snip...}
    React 5
        Measurer window-table.esm.js:438
        render window-table.esm.js:382
    React 8
        unstable_runWithPriority scheduler.development.js:653
    React 6
        componentDidUpdate EditableTableUI.js:107

Code below:

WindowTableTest.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Html5Table} from 'window-table';

/**
 *
 */
class WindowTableTest extends Component
{
    constructor( props )
    {
        super( props );

        this.state = {
            items:        this.props.items,
            tableData:    [],
            tableColumns: [],
        };
    }

    componentDidUpdate( prevProps, prevState, snapshot )
    {
        const { items } = this.props;

        if (prevProps.items !== this.props.items) {
            this.setState( {
                items:        items,
                tableColumns: this.buildTableColumns(),
                tableData:    this.buildTableData( items ),
            } );
        }
    }

    buildTableColumns()
    {
        return [
            {
                key:   'foo',
                title: 'Foo',
                width: 50
            },
            {
                key:   'bar',
                title: 'Bar',
                width: 50
            }
        ];
    }

    buildTableData( items )
    {
        return items.map( item =>
        {
            return {
                foo: item.foo,
                bar: item.bar
            };
        } );
    }

    render()
    {
        const { tableData, tableColumns } = this.state;

        return (
            <Html5Table
                data={tableData}
                columns={tableColumns}
                headerClassName="thead"
            />
        );
    }
}

WindowTableTest.propTypes = {
    items: PropTypes.array
};

export default WindowTableTest;

PageTest.js:

import React, {Component} from 'react';
import WindowTableTest from './WindowTableTest';

/**
 *
 */
class PageTest extends Component
{
    constructor( props )
    {
        super( props );

        this.state = {
            items: []
        };
    }

    componentDidMount()
    {
        // simulate an async request, such as an api call that populates items

        setTimeout( () =>
        {
            this.setState( {
                items: [
                    {
                        foo: 1,
                        bar: 2,
                    }
                ]
            } );
        }, 1000 );
    }

    render()
    {
        return (
            <WindowTableTest items={this.state.items} />
        );
    }
}

export default PageTest;

Using window-table 0.12.1 and React 16.13.1.

[pupudu]

Hey @monkeyArms Thank you for reporting the issue. Do you get the same error in chrome as well?

[monkeyArms]

Yes - same error in Chrome & Edge.

[monkeyArms]

I looked into this a bit more, and updating the data prop is not the issue. I have a minimal example here that displays the console error.

[pupudu]

Hi @monkeyArms Sorry about the delay. This has been fixed in v0.13.2

[monkeyArms]

Works great. Thank you for the fix and the awesome library!