How to initialize context with React hook

[amypellegrini]

Hi folks!

I'm building a React Native app with React useMachine hook and Xstate v5. I'm coming from using v4 extensively so having to relearn how some things work.

My question is how to define the initial context for a state machine from a React component?

In v4 I used to do something like:

const [state, send] = useMachine(myMachine, machineOptions);

where in machineOptions I could define an initial context from my React component.

However this doesn't work with v5. I tried passing input like this:

const [state, send] = useMachine(chordChartMachine, {
    input: {
      // ...context here
    },
  });

But this doesn't work either. I understand this is where ActorOptions are passed but I cannot find any more details in the docs about these options (since we are still in beta stage I guess).

How does this work?

BTW: congrats on the release of v5! Nice work.

[davidkpiano]

Hey, thanks!

Can you please share a full code example?

In general, input is used in context like this:

const chordChartMachine = createMachine({
  context: ({ input }) => ({
    userName: input.name,
    // ... other context properties
  }),
  // ...
});

// ...

const [state, send] = useMachine(chordChartMachine, {
  input: { name: 'some name' }
});

See the docs for more information: https://stately.ai/docs/input

[amypellegrini]

Gotcha! What I was missing was to define context as a dynamic value that receives the input.

State machine code before:

export const exampleMachine = setup({
  types: {} as {
    context: ExampleMachineContext;
    events: ExampleMachineEvents;
    input: {
      prop: PropType;
    };
  },
}).createMachine({
  id: 'machineId',
  initial: 'idle',
  
  // This will not work:
  context: {
    prop: "",
  },
  states: {
    idle: {},
    // ...other states
  },
});

State machine code after (with the fix):

export const exampleMachine = setup({
  types: {} as {
    context: ExampleMachineContext;
    events: ExampleMachineEvents;
    input: {
      prop: PropType;
    };
  },
}).createMachine({
  id: 'machineId',
  initial: 'idle',
  
  // context receives input like this:
  context: ({input}) => {
    return {
      prop: input.prop
    };
  },
  states: {
    idle: {},
    // ...other states
  },
});

So in the React component I can do:

const [state, send] = useMachine(exampleMachine, {
    input: {
      prop: "value"
    },
  });

Thanks for the clarification!