React Bootstrap Table doesn't update data on componentDidUpdate

Hi,

I’ve got a table that’s empty at the beginning and I want the user to insert data. This is my state:

this.state = {
            ...
            myArray: [],
	    ...
}

Within “myArray” is another array that holds the data to be displayed in the table:

 <BootstrapTable data={this.state.myArray[index].myInnerArray} striped hover condensed pagination options={{noDataText: "No data available"}}>
                            <TableHeaderColumn width='200' dataField="title" dataSort={true} isKey>Title</TableHeaderColumn>
                        </BootstrapTable>

I’ve got a button that opens a modal in which the user can choose from options that will be displayed in the table:

<Button onClick={()=>{this.openModal(index)}}>+</Button>

When you click on an option it triggers “componentDidUpdate”:

componentDidUpdate(){
	const index = this.state.currentIndex;
        if(this.state.myArray[index].myInnerArray.length !== 0)
            return this.state.myArray[index].myInnerArray;
}

The update of state works perfectly fine. It does exactly what it’s supposed to do, however the table doesn’t update (re-render). If I were to add another table with the same array, it displays the data (because it’s not empty anymore). Does your table support data changes on-the-fly? I searched for this feature, but couldn’t find it.

Is there generally a way to update “data” on componentDidUpdate (e.g. by using “setState()”), or do I have to customize your given “insertRow”-modal in order to change data on-the-fly? I’ve tried to do that, but that just a disproportionate effort for it’s intended functionality, in my case.

Thanks for your work!

[AllenFang]

handleReset() {
  this.ref.table.reset()
}

render() {
  return (
    <div>
        <button onClick={ this.handleReset.bind(this) }>RESET</button>
        <BootstrapTable ref='table' ...></BootstrapTable>
    </div>
  );
}

[tarim]

Hi @AllenFang,

I have a similar issue. After I update(with popup model) one row, the table doesn’t show the updated status until I click the table. But, the redux store updated record correctly.

Any idea, please?

Thanks,