const Toggler = () => { const [state, send] = useMachine(toggleMachine); return ( <button onClick={() => send('TOGGLE')}> {state.value === 'inactive' ? 'Click to activate' : 'Active! Click to deactivate'} </button> ); }
render() { const { current, item } = this.state; if (current.value === "editing" || current.value === "saving") { return ( <EditForm item={item} onSubmit={this.onSubmit} onCancel={this.onCancel} saving={current.value === "saving"} /> ); } return ( <> {current.actions && current.actions[0] && current.actions[0].type.startsWith("display") ? ( <Notification message={this.getActionContent(current.actions[0].type)} /> ) : null} <Item item={item} onEdit={this.onEdit} /> </> ); }
function App () { const [bulbOn, setBulbOn] = useState(false); useEffect(() => { service.onTransition(state => { console.log('Transitioning', state); switch (state.value) { case 'on': setBulbOn(true); break; case 'off': setBulbOn(false); break; case 'broken': setBulbOn(false); break; default: } }); service.start(); }); return ( <div className="App"> <LightBulb checked={bulbOn} /> <section> <button onClick={() => service.send('toggle')} >Turn {bulbOn ? 'Off' : 'On'}</button> <button onClick={() => service.send('break')} >Break Bulb</button> </section> </div> ); }
<tbody> <tr> <td>{state.value.stance}</td> <td> {state.value.equipment === 'unarmed' ? 'Unarmed' : 'Armed!'} {state.matches('equipment.weapon.firing') ? 'BANG' : ''} </td> <button onClick={() => send({ type: 'ATTACK' })} disabled={state.value.equipment === 'unarmed'} onClick={() => send({ type: state.value.equipment === 'unarmed' ? 'EQUIP' : 'UNEQUIP', }) {state.value.equipment === 'unarmed' ? 'EQUIP' : 'UNEQUIP'} </button> <p>
<h1>Search Star Wars API with XState and React</h1> <p> Current State: <code>{JSON.stringify(current.value)}</code> </p> <div className="form-group"> className={[!current.matches("blank") && "has-text"]} onChange={e => { send("SEARCH_CHANGED", { search: e.target.value }); }} value={current.context.search}
const Toggler = () => { const [state, send] = useMachine(toggleMachine); return ( <button onClick={() => send('TOGGLE')}> {state.value === 'inactive' ? 'Click to activate' : 'Active! Click to deactivate'} </button> ); }
<tbody> <tr> <td>{state.value.stance}</td> <td> {state.value.equipment === 'unarmed' ? 'Unarmed' : 'Armed!'} {state.matches('equipment.weapon.firing') ? 'BANG' : ''} </td> <button onClick={() => send({ type: 'ATTACK' })} disabled={state.value.equipment === 'unarmed'} onClick={() => send({ type: state.value.equipment === 'unarmed' ? 'EQUIP' : 'UNEQUIP', }) {state.value.equipment === 'unarmed' ? 'EQUIP' : 'UNEQUIP'} </button> <p>