Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Cannot render any custom componente, with react as front module

thionor
Level 1
Level 1

Hello everyone, hope all is good!
I am creating a AEM project, using react as a frontend module. 
Below, is the React structure, to create a componente called 'mapa'.

thionor_2-1634672369145.png

My problem is, when i drag the component to the page, it doesnt show, but crx/de i can see there. 

 

thionor_3-1634672648024.png

thionor_4-1634672741037.png

How can i do, to render my componente to the page?

Edit: Even putting inline text, it still doesn't render anything.
Thanks for all!

 

1 Accepted Solution
Ankur_Khare
Correct answer by
Community Advisor
Community Advisor

You can try below steps-

 

1. Check whether react js files are getting injected in ur page.

2. Just keep some text in your component.html file and see whether that is coming on the page or not.

3. If both are there then check any console errors.

4. Even that is not there then check in the aem logs if you sling model is throwign any error.

These are few steps for debugging.. more we can come up based on the console or error logs.

 

View solution in original post

2 Replies
Ankur_Khare
Correct answer by
Community Advisor
Community Advisor

You can try below steps-

 

1. Check whether react js files are getting injected in ur page.

2. Just keep some text in your component.html file and see whether that is coming on the page or not.

3. If both are there then check any console errors.

4. Even that is not there then check in the aem logs if you sling model is throwign any error.

These are few steps for debugging.. more we can come up based on the console or error logs.

 

View solution in original post

Vijayalakshmi_S
Community Advisor
Community Advisor

Hi @thionor,

Per the rendering you have defined in the React mapa component, can you confirm if component exposes a property named text (this.props.text)

You can cross verify by accessing the respectivepage.model.json in author (Ex : http://localhost:4502/content/wknd-spa-react/us/en.model.tidy.json) -> search for mapa, cross check if the AEM component mapping is correct and it has property named "text" with value