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

machine.js

// Invoked child machine
const counterMachine = Machine({
    id: 'counter',
    initial: 'active',
    context:{
        current: 0,
        times: 0,
        timesLimit: 5,
    },
    states: {
        active: {
            on: {
                NEXT: {
                    target: 'check',
                    actions: assign({
                        current: (context, event) => context.current + 1
                    })
                }
            },
            after: {
                1000: {
                    target: 'check',
                    actions: assign({
                        current: function (context, event) {
                            console.log("incrementing current");
                            console.log(context.current + 1);
                            return context.current + 1;
                        }
                    })
                }
            }
        },
        check: {
            on: {
                '': [
                    {
                        target: 'end',
                        cond: 'endLoop'
                    },
                    {
                        target: 'active',
                        actions: assign({
                            times: function (context, event) {
                                console.log("incrementing times");
                                console.log(context.times + 1);
                                return context.times + 1
                            }
                        })
                    }
                ]
            }
        },
        end: { 
            type: 'final',
            data: {
                current: (context,event) => context.current
            }
        }
    }
},{
    guards: {
        endLoop: function (context) {
            let result = context.times >= context.timesLimit
            return result
        }
    },
});



const parentMachine = Machine({
    id: 'parent',
    initial: 'active',
    context: {
        current: 0
    },
    states: {
        active: {
            invoke: {
              id: 'counter',
              src: counterMachine,
              onDone: {
                target: 'success',
                actions: assign({ current: function (context, event) {
                        return event.data.current;
                    }
                })
            }
            },
            entry: send(
              {
                type: 'NEXT'
              },
              {
                to: 'counter',
                delay: 1000
              }
            ),
        },
        success: {
        }
    }
})