Conditionally rendered state components

xstateful-react-state-views.jsx

<Display>
  <Time />
  <ClockMachine.State
    is="AlarmGroup.Ringing"
    render={() => <AlarmSetIndicator ringing />}
  />
  <ClockMachine.State
    is={['AlarmGroup.AlarmSet', 'AlarmGroup.Snoozing']}
    render={() => <AlarmSetIndicator />}
  />
 
  <Controls>
    <ClockMachine.State
      is="Normal"
        render={() => (
           <Button onClick={this.setAlarm}>
              Set Alarm After 3 Seconds
           </Button>
         )}
       />
      <ClockMachine.State
        is="AlarmGroup.Ringing"
        render={() => (
           <Button onClick={this.snooze}>
              Snooze For 3 Seconds
           </Button>
         )}
       />
      <ClockMachine.State
        is="AlarmGroup"
        render={() => (
           <Button onClick={this.unsetAlarm}>
              Cancel Alarm
           </Button>
         )}
       />
       <ClockMachine.State
        is="AlarmGroup.Ringing"
        render={() => <Ring />)}
       />
    </Controls>
</Display>