Visualizing State: Walkman State Machine Guard

WalkmanStateMachineGuard.jsx

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

class Walkman extends React.Component {
 transition = (target) => {
   const preventTapeJam = 
     ['REWIND', 'FASTFORWARD', 'PLAY'].includes(target) &&
     this.state.current === 'stopped'
 
   if (!preventTapeJam) {
     this.setState({ current: events[target] })
   }
 }
}