How can I add an editable child component inside a parent component using React SPA?

Hello @chaitanya_harinath  - 

Can you please elaborate your requirement a bit more?

Hi,

To add a child component inside another component without using a layout container in React, you can try these steps:

1. Create a separate React component for the child component.
2. Import the child component into the parent component.
3. Use the child component in the parent component's JSX code.
4. Pass data or props from the parent component to the child component as attributes.

Assuming you are still using aem-react-editable-components v1.x, here is an example of how it can be done.

Steps outside React code:

1. Assume that you have a card component with card title , image and text, but you want both of them editable

2. As you want one of them to be a parent , lets assume you build card component and extend container component (this is optional but doesnt harm), and mark it as cq:isContainer to true as part of component creation in CRX. Add child nodes using cq:template and include node names as image and text and set their resource types of image and text component accordingly

3. Create a sling model for this component but implement ContainerExporter instead of ComponentExporter. Using LayoutContainer/ResponsiveGrid implementation as reference to return children. However since the design is fixed, always expect children components names to be image and text, and obtain the child resources using these names for generating the output for getExportedItems

4. Now drag and drop this newly built component into a page, and confirm that sling model has card model with :items with child items image and text

For the React code:

1. First create Image and Text components and use MapTo to associate resource types

2. Create Card component and MapTo associated resource type

3. Now have the card component extend Container component (available in aem-react-editable-components v1.x), as this inheritance exposes a getter method childComponents i.e. this.childComponents which is an array of child components that are readily made editable since they are coming from OOTB Container component.

Make sure editConfigs are set properly and this will ensure image and text components empty placeholders will be rendered. We used this approach to render panel based components like Tabs, Carousel, etc. You can also refer to @61380/aem-core-wcm-components-react-spa if you can interpret the overall code - https://github.com/adobe/aem-react-core-wcm-components-spa/blob/master/src/container/tabs/v1/TabsV1.tsx

Hope this explanation helps.

Thanks !