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

[chaitanya_harinath]

Hello. Same as the title. I have a requirement to add a child component to be added inside another component without using layout container using React. The child component should be editable and act as an independent component. How can implement this? Is there any documentation for the same?

[Tanika02]

Hello @chaitanya_harinath  - 

Can you please elaborate your requirement a bit more?

[chaitanya_harinath]

Hi Tanika. 

This is mostly to align with a modular design.
For example, if I want to have a combination of text & image component, I want a parent component which includes editable text & editable image components in it. Similar to data-sly-resource in HTL.

[Tanika02]

@chaitanya_harinath - 

As per your requirement above, you have a requirement to add a child component to be added inside another component without using layout container using React 

Meaning you want to have a child component always available within the container component (via React) and that child component should be editable component right?

[chaitanya_harinath]

@Tanika02 Yes. That's correct

[ManviSharma]

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.

[chaitanya_harinath]

We tried this but the child component is not editable. The dialog of the component is unavailable.

[mahi1729]

Please see my reply above. Thanks !

[mahi1729]

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 @adobe/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....

Hope this explanation helps.

Thanks !