How I can render list in react and show it on page | Community
Skip to main content
S
stefanjank
Level 2
July 12, 2022
Solved

How I can render list in react and show it on page

  • July 12, 2022
  • 1 reply
  • 719 views

I have this

@Self
@Via(type = ResourceSuperType.class)
private List list;

 

@Override
public Collection<ListItem> getListItems() {
    return null != list ? list.getListItems() : null;
}

Is that even good? 

And in react im trying to render it like this but nothing is happening, blank page

{props.listItems && (
    <h4 className="footer__title">{props.listItems}</h4>
)}

Any suggestion?

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

Please check the page JSON format by adding model.json in the url something like this  : /content/we-retail.model.json. Search whether list is getting created in your component JSON.

Please cross check getExportedType() method is there in Model, MapTo('component-path') in React Component and same React Component is imported in import-components.js .


If all looks good, you can put loggers in react component initialization to debug more. 
React code looks fine. 
Document : https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/custom-component.html?lang=en

 

1 reply

Sachin_Arora_
Community Advisor
Sachin_Arora_Community AdvisorAccepted solution
Community Advisor
July 12, 2022

Please check the page JSON format by adding model.json in the url something like this  : /content/we-retail.model.json. Search whether list is getting created in your component JSON.

Please cross check getExportedType() method is there in Model, MapTo('component-path') in React Component and same React Component is imported in import-components.js .


If all looks good, you can put loggers in react component initialization to debug more. 
React code looks fine. 
Document : https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/custom-component.html?lang=en

 

    Terms & ConditionsAccessibility statement

    Loading footer...