useMachine send() child state

[alfligno]

Hello people,

How to send event from a child state that came from useMachine?

const [state, send] = useMachine(MyMachine)

PedestianStates

const pedestrianStates = {
	initial: 'walk',
	states: {
		walk: {
			on: {
				PED_TIMER: 'wait'
			}
		},
		wait: {
			on: {
				PED_TIMER: 'stop'
			}
		},
		stop: {}
	}
}

Light Machine

export const LightMachine = Machine({
	key: 'light',
	initial: 'green',
	states: {
		green: {
			on: {
				TIMER: 'yellow'
			}
		},
		yellow: {
			on: {
				TIMER: 'red'
			}
		},
	        red: {
			on: {
				TIMER: 'green'
			},

			...pedestrianStates
		}
	}
})

I read on the documentation regarding on this, it could be access by machine.transition() method, but don't know with the useMachine send function :)

I want to come up with something like triggering the state, send("red.walk", "wait");

[alfligno]

Im having answers now, I guess invoker will be the solution

Updates:
I tried invoker but it seems like it only suits with fetching data or something, the side thing about this is, it does not trigger or commit event change to the parent machine, unlike state, but it is a given situation cause it is a separate Machine,

For now I guess, I have to use Hierarchical State Nodes

I guess both has their own advantages 👍

[Andarist]

You can't really send an event to a child state - you send it to a machine and the current configuration of states is being checked against available transitions for that sent event.

[alfligno]

Yups, Thanks you for this, :),
Once the current state is active, then its state event can be triggered :)