AEM with react

[Sandeep6]

Hi all,

In my project, we are using AEM 6.4 with react. From aem we are exposing data to react as data props like below

<div data-component='changeAssessmentDetails' data-props='
{
"changeAssessmentTitle":"Change your assessment",
"cancelButtonbgColor":"#e3e000"
}
'></div>

In react, they are creating component using component name(changeAssessmentDetails) what we have exposed.

Now I got a requirement to show different UI for same component. I can send one field from aem as a data property. 

Based on that property ,Is it possible to show different UI in react?

Note: Data component name should be same in both the cases.

Thanks in advance. 

[Umesh_Thakur · Accepted solution]

If different UI means only look and feel then you can easily do it as just css class needs to be added. only thing you need to do is, from the data property get the value and based on the value you need to add css class for different UI.

[Sandeep6]

Hi @Umesh_Thakur ,

Please provide me any example for the same.

[Umesh_Thakur]

I am providing similar stuff in window object

let say you have one window object window.demo.example = {

backgroundColor="red"

}

in React:

inside didmount or where ever you want

get the object like

let object = window.demo.example.backgroundColor;

if(object==="red")

{

   <dive className="firstUi" >

</div>

}

else

{

<dive className="secondUi" >

</div>

}

NOTE: Since your data element will always be there in your dom so you can parse it with vanilla js

hope this will help