react-bootstrap-table-next with mobx store doesn't render changes

user_9789690 0
Viewed 380

How to setup react-bootstrap-table-next with mobx store?
My problem that bootstrap table doesn't render "store" changes. Is there any specific method/property that will trigger data refresh? The same code sample works with local state:

Full mobx example: https://codesandbox.io/s/react-bootstrap-table-next-with-mox-store-basic-example-not-rendering-changes-o5v6g

Local state example: https://codesandbox.io/s/react-bootstrap-table-next-with-local-state-basic-example-rendering-changes-1o9b9

// store

class Store {
  @observable data = [];
  @action setData(list) {
    this.data.push(...list);
  }
  ...
}

// component

@observer
class ProductList extends React.Component {

  render() {

    return 
      <BootstrapTable
        keyField="id"
        data={this.props.store.data}
        ...
      />
  }

}

// App.js

ReactDOM.render(<ProductList store={store} />, rootElement);
mobx reactjs javascript
1 Answers

The reason is very simple - BootstrapTable react component is not designed to observe mobx changes(no @observer attribute placed on it).

So as a workaround you can add hidden fields in your component with all the data you want to observe:

@observer
class ProductList extends React.Component {

  render() {

    return 
      <>
          <span className="hidden">{this.props.store.data.length}</span>
          <span className="hidden">{this.props.store.data.map(x=>{{x.someProp1, x.someProp2, x.someProp3}})}</span>
          <BootstrapTable
           keyField="id"
           data={this.props.store.data}
           ...
          />
      </>
  }

}

With the example above a render of the table will be done on:

  • Change of store data elements count
  • Change of someProp1, someprop2, someProp3 in any element of the store data

I know it is a little bit hacky, but the library you are using comes with this limitation, which you should work around

user_46648660
Related