I have a requirement of creating a carousel container component with parsys dropped inside it, the FE part is done using react.
I'm getting the number of parsys to be dropped inside the container through the model.json that will be passed as a prop to my React component.
Based on the value I'm iterating the Responsive grid component from @adobe/aem-react-editable-components library version 2.0.1.
Code:
function CardType (cardCount,index) {
for(i=0;i<cardCount;i++){
<ResponiveGrid
pagePath="/content/poc/us/en/test"
itemPath="root/responsivegrid/carousel/card${index}"
/>
}
}
The above function adds parsys to the carousel container, and through page policy, I'm configuring the allowed components.
The issue is, once I drop any component inside the parsys there is an infinite loop of API calls to model.json http://localhost:4502/content/poc/us/en/test/jcr:content/root/responsivegrid/carousel/card0.model.js....
Inside crx/de, the cards node is created with the correct authoring value but on a refresh of AEM authoring env the authoring data is lost, but the cards node is still inside crx/de with all the values.
I have looked at all examples related to components inside components but couldn't find the right solution.
Can anyone please help.
