No render table with new data

[fonderkin]

Component no Re-rendering when load new data.

Example

import BootstrapTreeTable from 'bootstrap-react-treetable';

const Test = () => {
  const [tabValue, setTabValue] = useState(0);
  const handleClick = (n) => () => {
    setTabValue(n);
  };

  const data = React.useMemo(() => {
    switch (tabValue) {
      case 0:
        return {
          tableData: [
            {
              data: {
                name: 'name0',
                dataType: 'string0',
              },
            },
          ],
          columns: [
            {
              dataField: 'name',
              heading: 'name',
            },
            {
              dataField: 'dataType',
              heading: 'dataType',
            },
          ],
        };
      case 1:
        return {
          tableData: [
            {
              data: {
                test: 'test',
                test2: 'test2',
                test3: 'test3',
              },
            },
            {
              data: {
                test: 'test',
                test2: 'test2',
                test3: 'test3',
              },
            },
          ],
          columns: [
            {
              dataField: 'test',
              heading: 'test',
            },
            {
              dataField: 'test2',
              heading: 'test2',
            },
            {
              dataField: 'test3',
              heading: 'test3',
            },
          ],
        };
      default:
        return null;
    }
  }, [tabValue]);

  return (
    <div>
      <button type="button" onClick={handleClick(0)}>
        Tab 1
      </button>
      <button type="button" onClick={handleClick(1)}>
        Tab 2
      </button>
      <div>Table Data {JSON.stringify(data)}</div>
      <BootstrapTreeTable tableData={data.tableData} columns={data.columns} control={{}} />
    </div>
  );
};

export default Test;

Result Tab 1

Result Tab 2

Expected behavior

Re-rendering when load new data

[eduardoluizgs]

Me too. Try to update state with a loop, don´t update or re-render the component. Sample:

  async populateData() {
    ...
    let requirements = [];

    await Promise.all(this.state.issues.map(async (issue) => {
      const response = await fetch(`url`, {
        headers: !token ? {} : { 'Authorization': `Bearer ${token}` }
      });
      const content = await response.json();
      requirements = [...requirements, ...content.data || []]

     this.setState({
        requirements: [...this.state.requirements, ...requirements.data],
     });

    }));

    ...
  }