VisualizingState: Walkman State Machine + Complexity

WalkmanStateMachineComplex.jsx

const events = {
   STOP: 'Stopped',
   PLAY: 'Playing',
   REWIND: 'Rewinding',
   FASTFORWARD: 'FastForwarding',
 }

class Walkman extends React.Component {
 state = {
   current: events.STOP,
 }
 transition = (event) => {
   this.setState({ current: events[event] })
 }
 render() {
   const Button = ({ children, event, active }) => {
     return (
       <button onClick={() => this.transition(event)}>
         {children}
       </button>
     )
   }
   return (
     <div>
       <div>{this.state.current}</div>
       <Button event='STOP'>◼</Button>
       <Button event='PLAY'>►</Button>
       <Button event='REWIND'>◀◀</Button>
       <Button event='FAST_FORWARD'>▶▶</Button>
     </div>
   )
 }
}