Generated by XState Viz: https://xstate.js.org/viz

machine.js

const nextStep = assign({
  currentStep: (ctx, _event) => Math.min(3, ctx.currentStep + 1)
});

const prevStep = assign({
  currentStep: (ctx, _event) => Math.max(0, ctx.currentStep - 1)
});

const isLastStep = (ctx, _event) => {
  return ctx.lastStep === ctx.currentStep;
};

const multistepFormMachine = Machine(
  {
    id: "multistepFormMachine",
    initial: "notSubmitted",
    context: {
      maxSteps: 3,
      currentStep: 0
    },
    states: {
      notSubmitted: {
        on: {
          NEXT: {
            target: undefined,
            actions: "nextStep",
          },
          BACK: {
            target: undefined,
            actions: "prevStep",
          },
          SUBMIT: {
            target: "submitted",
            cond: "isLastStep"
          }
        }
      },
      submitted: {
        
      }
    }
  },
  {
    actions: {
      nextStep,
      prevStep
    },
    guards: {
      isLastStep
    }
  }
);