CODEWITHSUNDEEP
reactjsmobxmobx-react
panjiesw
panjiesw

Reputation: 156

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?

Upvotes: 3

Views: 2131

Answers (2)

Tukan
Tukan

Reputation: 2333

It is because a mobx array is actually an object.

Documents state that whenever a situation like yours occurs data should be passed as;

data.slice()

In order to turn it into a normal array. Since the library in question most likely lacks the observer decorators as well, I think even if you were to pass the observable down with its reactive qualities, it wouldn't work. Therefore you should either handle this as a nonreactive data, or fork the library to accommodate this need.

Upvotes: 1

mweststrate
mweststrate

Reputation: 4978

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

Upvotes: 3

Related Questions