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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const items = [
    {
      id: 1,
      type: "one"
    },
    {
      id: 2,
      type: "two"
    },
    {
      id: 3,
      type: "three"
    }
  ]
  
  const itemOneMachine = Machine({
    id: "item",
    initial: 'initial',
    context: {},
    states: {
      initial: {
        actions: sendParent({
          type: 'TRANSITION_TO',
          target: 'modal-3'
        }),
      },
    }
  })
  
  const modalMachine = Machine({
    id: 'modal',
    initial: 'modal-1',
    context: {},
    states: {
      'modal-1': {
        on: {
          SELECT_ITEM: {
            actions: assign({
              itemRef: (context, event) => {
                return spawn(itemOneMachine, 'item')
              }
          })
        },
        TRANSITION_TO: [
          { 
            target: 'modal-2',
            cond: (context, event) => {
              return event.target === 'modal-2'
            }
          },
          {
            target: 'modal-3',
            cond: (context, event) => {
              return event.target === 'modal-3'
            }
          }
          ]
        }
      },
      'modal-2': {},
      'modal-3': {}
    }
  });
  
  interpret(modalMachine).send('SELECT_ITEM');