Using Flow to check state transitions

transition.jsx

// @flow

import React, { Component } from 'react'

type State = { s: StartState | EndState }
type StartState  = { stage: 'start' }
type EndState = { stage: 'end' }
// c.f. http://stackoverflow.com/questions/41604525/do-flow-refinements-not-propagate-up

export default class App extends React.Component {

  state: State = { s: { stage: 'start' } }

  render() {
    const s = this.state.s
    if (s.stage === 'start') {
      return <button onClick={this.goToNextStage(s)}>Click me!</button>
    } else {
      return <p>Nice job!</p>
    }
  }

  goToNextStage = (s: StartState) => () => {
    this.setState({ s: { stage: 'end' } })
  }
}