{
  // This name corresponds to the one coming from getCurrentState() and
  // being set by setNewState()
  name: 'State Name',

  // Array of plain objects that describe automatic transitions
  // These are evaluated after a transition and when props change
  autoTransitions: [
    // A transition object must contain two properties:
    // test, which is a function that recieves the StateMachine data, and returns true if a state change should take place
    // newState, which is the name of the state to transition to when the test function returns true
    {
      test: data => data === 'expected for state change',
      newState: 'Name of new state'
    }
  ],

  // This is a list of states that can be transitioned to from the current state using the transitionTo
  // prop passed to a state component. Trying to use transitionTo with a state not specified in this list
  // will throw an error. This list, together with any 'newState's described in autoTransitions form the
  // full set of valid transitions for this state.
  validTransitions: [
    'Name of valid state'
  ],

  // beforeRender is an optional function that can run some code before this states component
  // is rendered. For anything sufficiently complex however, it's better to use a react class
  // component and take advantage of lifecycle hooks
  beforeRender: (data) => {
    data.startAPIRequest();
  },

    // One of the following two properties must be implemented:

  // a render prop that recieves the 'props' object supplied to the StateMachine
  // the props object will also include a 'transitionTo' function and a 'currentState' string
  render: (data) => {
    return <SomeComponent propUsingStateName={data.currentState} {...data} />
  },

  // Or just a regular react component
  component: SomeReactComponent
}