how to integrate react-select with mobx? - mobx

Question

I'm working with react-select, to add a multi-select control in my web-app. http://jedwatson.github.io/react-select/
I'm looking for a good example to inject mobx observables into the control.
The first challenge I have is initialising the options in an async way (options are fetched from server, but after that I want regular filtering to apply, no need for async-options).
Any good examples out there?
import Select from 'react-select';
<Select
multi
disabled={this.state.disabled}
value={this.state.value}
placeholder="Select your favourite(s)"
options={this.state.options}
onChange={this.handleSelectChange}
/>

Answer 1

As noted in MobX documentation, due to limitations in ES5, ObservableArray still has some quirks. react-select is one of those libraries that don't work with ObservableArray out of the box. There are 2 ways to solve this.
Method 1
you already have an observable array with label and value
#observable myOptions = [
{label: 'foo', value: 123},
{label: 'bar', value: 345}
]
then you can use the ObservableArray's .peek() method to return a regular array for read-only purposes
<Select
options={this.myOptions.peek()}
onChange={this.handleSelectChange}
/>
Method 2
You have the observable array in some other format, returned from server. This is a more common case, actually.
#observable peopleData = [
{name: 'foo', _id: 123, address: 'fooville'},
{name: 'bar', _id: 345, address: 'barville'}
]
in this case, you can create a #computed value, which also returns a plain array:
#computed get peopleOptions() {
return this.peopleData.map(x => ({ label: x.name, value: x._id })
}
and connect the Select component to the computed value, which will auto-update each time new data from server are fetched.
<Select
options={this.peopleOptions}
onChange={this.handleSelectChange}
/>
in both cases, this.handleSelectChange should just update the original data.