title: Is there a way to set the state of an xstate machine in a react component in useEffect?
body: <p>I have the following React.js component that needs the following:</p>
  <ul>
  <li>Persist the state when a button is clicked through using fetch to call a server side API.</li>
  <li>When the component is initialized that the state is set in the component after calling <code>useEffect</code> that uses fetch to call a server side API to get the current state of the object.</li>
  </ul>
  <p>Here is the display of the component</p>
  <hr />
  <p><a href="https://i.stack.imgur.com/cYj2U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cYj2U.png" alt="State Buttons" /></a></p>
  <hr />
  <p>Here is what I have so far.</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useEffect, useState } from 'react';
  import { useParams, useHistory } from &quot;react-router-dom&quot;;
  import { createMachine } from 'xstate';
  import { useMachine } from &quot;@xstate/react&quot;;
  import {MagellanButton} from &quot;./Styles&quot;;
  import 'bootstrap/dist/css/bootstrap.min.css';
  import '../App.css';
  
  const approvalMachine = createMachine({
      id: 'approve',
      initial: 'Not Submitted',
      context: {
          retries: 0
      },
      states: {
          'Not Submitted': {
              on: {
                  SUBMIT: 'Pending Approval'
              }
          },
          'Pending Approval': {
              on: {
                  CANCEL: 'Not Submitted',
                  CHANGE: 'Change Request',
                  DENIED: 'Denied',
                  APPROVED: 'Approved'
              }
          },
          'Change Request': {
              on: {
                  RESUBMITTED: 'Pending Approval',
                  CANCEL: 'Not Submitted'
              }
          },
          Denied: {
              type: 'final'
          },
          Approved: {
              on: {
                  PUBLISH: 'Published'
              }
          },
          Published: {
              type: &quot;final&quot;
          }
      }
  });
  
  function MagellanStateManager({id}) {
      const parameters = useParams();
      const history = useHistory()
      const [state, send] = useMachine(approvalMachine);
  
      useEffect(() =&gt; {
      }, []);
  
      return (
          &lt;span style={{float: &quot;right&quot;, marginTop: 8}}&gt;
              &lt;span className=&quot;m-form-label  ml-3&quot;&gt;State:&lt;/span&gt; &lt;span&gt;{state.value}&lt;/span&gt;
              &lt;MagellanButton className=&quot;ml-3&quot; disabled={!state.nextEvents.includes('SUBMIT')} onClick={() =&gt; send('SUBMIT')}&gt;Submit&lt;/MagellanButton&gt;
              &lt;MagellanButton className=&quot;ml-3&quot; disabled={!state.nextEvents.includes('CANCEL')} onClick={() =&gt; send('CANCEL')}&gt;Cancel&lt;/MagellanButton&gt;
              &lt;MagellanButton className=&quot;ml-3&quot; disabled={!state.nextEvents.includes('CHANGE')} onClick={() =&gt; send('CHANGE')}&gt;Change&lt;/MagellanButton&gt;
              &lt;MagellanButton className=&quot;ml-3&quot; disabled={!state.nextEvents.includes('RESUBMITTED')} onClick={() =&gt; send('RESUBMITTED')}&gt;Resubmit&lt;/MagellanButton&gt;
              &lt;MagellanButton className=&quot;ml-3&quot; disabled={!state.nextEvents.includes('DENIED')} onClick={() =&gt; send('DENIED')}&gt;Deny&lt;/MagellanButton&gt;
              &lt;MagellanButton className=&quot;ml-3&quot; disabled={!state.nextEvents.includes('APPROVED')} onClick={() =&gt; send('APPROVED')}&gt;Approve&lt;/MagellanButton&gt;
              &lt;MagellanButton className=&quot;ml-3&quot; disabled={!state.nextEvents.includes('PUBLISH')} onClick={() =&gt; send('PUBLISH')}&gt;Publish&lt;/MagellanButton&gt;
          &lt;/span&gt;
      )
  
  }
  
  export default MagellanStateManager;
  </code></pre>