How to bind AEM component to another using SPA. (data-sly-resource in the traditional way)

[luongpham1994]

Hi Everyone.

I'm working with SPA in AEM, I have a question on how to embed another component into an AEM component using SPA React.

In the traditional way, I can use data-sly-resource to implement it.

Thanks, guys

[Mahedi_Sabuj]

Hi @luongpham1994, Can you please check this?

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-add-parsys-or-compo... 

[luongpham1994]

Hi @Mahedi_Sabuj , Thanks for your response.

I just read the article you posted above and still be not sure how to embed another component into a parent component.

In my case, I have a header component that includes a button component and a list component like this image.

[Mahedi_Sabuj · Accepted solution]

Hi @luongpham1994, Please check the pull request https://github.com/MahediSabuj/aem-react-spa/pull/11 

- Extend Container core component in the Header Sling Model

- Add List and Button component in the component _cq_template

- Include the component in the React using this.childComponents[0], this.childComponents[1], ...

Author View:

[luongpham1994]

Awesome, Thanks so much for your example @Mahedi_Sabuj.

[SwapnilDesai]

Hi @Mahedi_Sabuj ,

I have followed same process for Teaser component and getting bellow error, can you please check and guide me.