Can we allow multiple component inside a SPA component build in React ?

[Kaibalya_123]

Hello everyone!

In my local, I'm utilizing a SPA react component. I received a request for a bring option to allow multiple components inside SPA react components like Tab and Accordion.

1. Is it possible to use the Tab and Accordion components feature within the SPA component?
2. Is it the SPA React component or an AEM standard component that I will be permitted to use inside it?

Thank you.

[milind_bachani]

Hi @Kaibalya_123 ,

The answer is totally subjective to requirement.

Best way to manage this is to create atomic and composite components.

For instance,
Atomic components can be - image, form fields

Composite components - Image card (image + heading) by using atomic components.

Also refer this repo : https://github.com/adobe/aem-react-core-wcm-components-spa/blob/master/README.md

Hope this helps, thanks.

[Anmol_Bhardwaj · Accepted solution]

You can include a component inside another component within SPA, but, that must be done through code.

As AEM already provides a parsys functionality for the same, we can achieve this relatively easily through AEM component.

Inside your AEM component's HTML(which would be importing the SPA component), just add a parsys and in the template policy only allow Tab & Accordion for it.

Also, if you need it to be dependent on a option which is controlled by authoring, just add a sly-test on the parsys rendering.