State Machines with XState

Code

const toggleMachine = createMachine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: {
      on: { TOGGLE: 'active' }
    },
    active: {
      on: { TOGGLE: 'inactive' }
    }
  }
})

const Toggle = () => {
  const [state, send] = useMachine(toggleMachine)
  
  return (
    <button onClick={() => send('TOGGLE')}>
      {state.value}
    </button>
  )
}