Is there any documentation for creating nested AEM React SPA Component ?

[Suraj_Kamdi]

Is there any documentation for creating a nested AEM React SPA Component? For example, if you want to create a Component A which has Component B as a fixed component. I have a requirement where I want to render component B by Configuring component A.

[milind_bachani]

Hi @Suraj_Kamdi ,

When you create SPA react component, you have to wrap the component B in render() of component A in the react code itself. You can refer react articles for component embedding and wrapping.

The only concept while embedding would be passing the required props to component B(fixed component) from component A(to be configured component).

One of the tutorials you can refer : https://www.pluralsight.com/guides/how-to-wrap-one-react-component-into-another

You need to import the componentB in componentA.

pseudo render():

//ComponentA render()

<div class="this-is-componentA-parent">
    //some html for component A here...
    <ComponentB expectedProp={props.propertyConfiguredInComponentA} />
</div>

Let me know if you still have any further concerns.
Thanks.

[Suraj_Kamdi]

This is not the solution. The component will not render in edit mode.

[AAlbagshi]

Did you find any solution? I'm facing the same scenario.