Mobx + React simple todolist

HTML

<script src=" https://unpkg.com/mobx/lib/mobx.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.min.js"></script>
<script src="https://unpkg.com/mobx-react"></script>
<body>
  <div id="mount">
  
  </div>
</body>

Babel + JSX

let {Component} = React;
let {observable, computed} = mobx;
let {observer} = mobxReact;

@observer
class Spinner extends Component {  
  @observable promise = {state: 'pending'}
  componentWillMount() {
    this.observePromise(this.props.promise)
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.promise !== nextProps.promise) {
      this.observePromise(nextProps.promise)
    }
  }
  
  observePromise(p) {
    this.promise = {state: 'pending'}
    p.then(v => {
      this.promise = {state: 'fulfilled', value: v}
      if (this.props.onFulfill) {
        this.props.onFulfill(v)
      }
    }, e => {
      this.promise = {state: 'rejected', error: e}
      if (this.props.onResolve) {
        this.props.onReject(e)
      }
    })
  }

  render() {
    if (this.props.promise == null)      return null;
    if (this.promise.state == 'pending')   return <img src="https://media.giphy.com/media/10kTz4r3ishQwU/giphy.gif" />
    if (this.promise.state == 'rejected')  return <div>Error: {this.promise.error}</div>
    if (this.promise.state == 'fulfilled') return this.props.render(this.promise.value)
  }
}


function timeout(N) {
  return new Promise(resolve => setTimeout(resolve, N))
}

const p = timeout(2000).then(() => ["Option 1", "Option 2", "Option 3"])

@observer
class Main extends Component {
  @observable selectedItem = null;
  render() {
    return <div>
      <Spinner promise={p} render={data => (
      	<div>
      	  <p>Please make your choice:</p>
          <select onChange={e => {console.log(this); this.selectedItem = e.target.value}}>
            {data.map(item => <option key={item} value={item}>{item}</option>)}
          </select>
        </div>
      )} onFulfill={v => this.selectedItem = v[0]} />
      <p>Selected item is {this.selectedItem == null ? 'N/A' : this.selectedItem}</p>
    </div>
  }
}
    

ReactDOM.render(<Main />, document.getElementById('mount'));