Nesting AEM components and React Components

[DriesVanbilloen]

Hi all,

I'm currently learning how to work with the new AEM SPA editor. My goal is to use this SPA editor in real projects, but I'm stuck on the following concept.

I want to use the WCM tabs component that can insert other React Components. So the structure would be something like this:

tabs/

          tab1/

                    React-Component

          tab2/

                    React-Component

I tried this with the WKND events sample but it doens't render the WCM component on the page and i cannot seem to find any error.

My question is: Are there alternatives or projects that I can use to help me figure this out?

Thanks in Advance!

[Daniel_Gordon]

Hi DriesVanbilloen,

Very cool use case. I have not experimented with this but it might not be achievable with the Core Component Tab component. A few questions:

Are you using the Tab Component from Core Components? aem-core-wcm-components/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs at master...

I haven't dug into the Tab component but at first glance, I'm not sure it will map properly to a React component since it doesn't seem that :type property is exposed in the exported JSON. This is needed in order to map the resource type to the SPA component. Will check internally on this and follow up.

[DriesVanbilloen]

I indeed use the tabs component that you linked!

[DriesVanbilloen]

The conversation continues and can be found in the following github issue: (Also a partial solution)

Composed React Components | WCM components · Issue #16 · Adobe-Marketing-Cloud/aem-guides-wknd-event...

Updates will also continue in the github issue.