Nested react components?

[rajansaini691]

Hello! What is the best way to deal with nested react components?

Suppose component A is managed by a root machine A'. While A' is in some state S, I would like A to render a new component B and start a service B', managing B's state. I would also like B to listen for events and notify A' through B'.

There are two ways I've been attacking this:

• Use useMachine to start B'. My issue is that it spins up a new service but does not give it a parent. This causes sendParent to crash when I try to get B' to talk to A'.
• Invoke B' when A' enters S. This lets sendParent work, but I'm not sure how to connect the running service B' to component B (so that B can send UI events).

Which of these two would be better, or is there a third option? Any and all help is appreciated!

[tomByrer]

I watched an egghead.io lesson yesterday on splitting a component into 2 files. There are files on Github.

Information can be passed between machines via props so machines don't actually need to know about each other.

[Andarist]

Use useMachine to start B'. My issue is that it spins up a new service but does not give it a parent. This causes sendParent to crash when I try to get B' to talk to A'.

To make this work you could pass the parent service to the inner component (as a prop or whatever) and just use things like send(event, { to: parent }). Don't treat this situation as a parent-child situation but rather just 2 separate machines that happen to know each other "addresses" (well, to get "child"'s address in the "parent" you would have to greet it with an event in this situation).

Invoke B' when A' enters S. This lets sendParent work, but I'm not sure how to connect the running service B' to component B (so that B can send UI events).

You can grab the child from state.children.