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?
mobx-react ships with it's own propTypes
, which you can use: https://github.com/mobxjs/mobx-react#proptypes