Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

Avatar

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

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

2 Replies

Avatar

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


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

Avatar

Community Advisor

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