Search code examples
reactjsmobxmobx-react

Passing MobX @observable of array to React Component props of PropTypes.array


So I'm using a vanilla React UI component library and MobX as state management in my app. When I have an observable of array as data and I want to pass it down from my component (which is a mobx-react observer) to the UI library's component (which the prop is the type of PropTypes.array), the component rejects it saying my observable array is an object, not an array.

// my store
class Store {
  @observable data = [...];
}


// my component
@inject('store')
@observer
class MyComponent extends React.Component {
  ...
  render() {
    const {store} = this.props;
    return <LibComponent data={store.data} />
  }
}

// library's component
class LibComponent extends React.Component {
  static propTypes = {
    data: PropTypes.array,
    ....
  }
}

I've read about using toJS from mobx in this similar question, but is there any other way to work around this? As I'm not the owner of the UI library I can't add PropTypes validations which come in mobx-react package mentioned in that question as answer. Will the UI library react to change with toJS as input of its prop?


Solution

  • mobx-react ships with it's own propTypes, which you can use: https://github.com/mobxjs/mobx-react#proptypes