1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16"use client"; import { useMachine } from "@xstate/react"; import { toggleMachine } from "../_machines/toggle"; export default function Toggle() { const [state, send] = useMachine(toggleMachine); return ( <div> <h2> Toggle status: <span>{state.matches("active") ? "On" : "Off"}</span> </h2> <button onClick={() => send({ type: "TOGGLE" })}>Toggle</button> </div> ); }