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

Question

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);

What versions of the libs are you using? I am using Bootstrap table with mobx 4 in a functional component and it is rendering just fine. Just make sure that your operations youd o on the store.data are actually tracked by Mobx itself mobx.js.org/best/react.html Example: If you are adding to an array inside store.data.myarray make sure that in a store action you do it like this ` this.data.myarray = this.data.myarray.concat(newarray)` This way Mobx will see that the variable now points somewhere else, a pure value change will not do the trick — hmrc87
– hmrc87, Commented May 25, 2020 at 5:28

Antoan Elenkov · Accepted Answer · 2020-03-31 21:05:27Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related