How can I make multiple machines by hook?

[baeharam]

Context

I have to make multiple machines to pass service to children.
Probably, you would suggest that starting machine in each child component.
However, I have to send event in parent component.

Question

Then, how can I make multiple machines in parent component by iteration.
Hook like useMachine cannot be used in iteration statement.

Pseudo Code

const ParentComponent = () => {
  const [,send, service] = useMachine(someMachine); // This machine should be made as multiple instances
  // For example
  // const machines = Array(10).fill(0).map(_ => useMachine(someMachine))
  service.start();

  const children = [];

  return (
    <div>
    {children.map((_, idx) => {
      return <ChildComponent service={service} key={idx} />
     }}
    </div>
  );
}

[Andarist]

This can't be done easily due to the rules of hooks. It's advised to move a hook into your ChildComponent in a case like this (like you have mentioned).

You could also create a single machine in your parent component and spawn multiple children - like:

const parentMachine = {
  entry: assign(() => ({
    children: Array(10).fill(0).map(_ => spawn(someMachine))
  }))
}

const ParentComponent = () => {
  const [state, send, service] = useMachine(parentMachine); 

  return (
    <div>
    {state.context.children.map((child, idx) => {
      return <ChildComponent service={child} key={idx} />
     }}
    </div>
  );
}

[baeharam]

Your suggestion is good, but I have to use useService dynamically per service. Therefore, I decided to start machine in child and lift state up to parent. Anyway, thanks