How to render react component in aem component

[AnamikaP]

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.

[vishnuunnikrishnan]

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;

[AnamikaP]

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]

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]

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>

<reacttag componentId="${obj.componentId @context='unsafe'}"></reacttag>

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]

@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!