Expand my Community achievements bar.

Learn about Edge Delivery Services in upcoming GEM session

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


Community Advisor

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.


Topics help categorize Community content and increase your ability to discover relevant content.

3 Replies


Employee Advisor

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} />

Let me know if you still have any further concerns.


Community Advisor

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


Level 1

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