Level 2

Question

How to render react component in aem component

Forum|Forum|1 year ago
August 5, 2024
3 replies
1436 views

I want to load the react component in AEM component. How will I mount the react component for a div in aem.
<sly data-sly-test="${properties.loadFromReactFlag}">
<div id="react-container"></div>
</sly>
<sly data-sly-test="!${properties.loadFromReactFlag}">
<p>Loaded from AEM</p>
</sly>

For id="react-container" this div I want to load the HTML from the react component.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

V

VishnuUn

Level 2

Hello @anamikap ,

In our project we have done by passing the jsonString which is returned from the Model Class to React via data tag

sample:

<sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html">

    <sly data-sly-use.helper="com.proj.core.models.SampleComponentModel"></sly>

    <proj-sample-component aem-data='${helper.jsonString}'>
     </proj-sample-component >

     <sly data-sly-call="${templates.placeholder @ isEmpty = !showTemplate}"></sly>

</sly>

In React Component, read like below

SampleComponent.displayName = 'SampleComponent';

SampleComponent.propTypes = {
description_t: PropTypes.string.isRequired,
url: PropTypes.string.isRequired,
ctaTargetType: PropTypes.string,
};
export default SampleComponent;

A

AnamikaPAuthor

Level 2

But I am mapping the component by using map to but how will I load the react component in HTL for a specific div. I want to load the react component conditionally. In the below code snippet if flag is true then HTML should load from react component and if it is false HTML should load from the AEM.
<sly data-sly-test="${properties.loadFromReactFlag}">
<div id="react-container">LOAD from REACT</div>
</sly>
<sly data-sly-test="!${properties.loadFromReactFlag}">
<p>Loaded from AEM</p>
</sly>

rk_pandian

Level 4

Hi @anamikap,

As far as I know, you can only render content via react inside an AEM component when the needed content is exposed to react (via json etc). Then the react application should read that data and target this <div>. Are you expecting something like this?

Regards,

Ramkumar

Umesh_Thakur

Community Advisor

in your component's HTL you write something like:

<div data-sly-use.obj="com.mysite.aem.models.MyModel"

data-cmp-data-layer="${obj.data}"

id="${obj.componentId @context='unsafe'}">

</div>

create one utility js file in your react module which will query the "reacttag" and render the respective react component with like :

import React from 'react';
import ReactDOM from 'react-dom';

function exportHtml(Component, htmlTag) {
          /* let elements= document.querySelectorAll(htmlTag);
          elements.forEach((element) => {
             let compId = element.getAttribute("componentId");
             ReactDOM.render(<Component componentId={compId} />, element);
          }); */
}
export default exportHtml;



Hope this helps
Umesh Thakur

kautuk_sahni

Community Manager

@anamikap Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

Kautuk Sahni

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded