React custom component with props in cif-venia project

[mrkumar82]

I have created a project using Venia, there are no issues with CIF component, working just fine,

I have to create some custom components for which I want to use React js, but not sure how to pass the data to react component as props. I dont want to make an API calls for each and every components to get the component data.

The way I am looking for is like WKND project where you hae Mapto to map the components between AEM and React can get data from props.

I tried react habitat which works only with class components not with functional component.

Thanks

[milind_bachani]

Hi @mrkumar82 ,

The ask here sounds a little vague to me, can you please elaborate on the requirement ?

If you are expecting the authored values in AEM component to passed to react, you can simply use a model class to achieve the same.
Refer link for tutorial : https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s...

If our each component is expecting a dynamic value and you are expecting data from some PIM or by some external APIs, you can use slices and call every API needed during session start (or first load) and store it in ReduxStore and then directly use the responses stored in reduxStore in your react component(works for both functional & class).

[mrkumar82]

Hi @milind_bachani ,

Thanks for your reply.

The project I mentioned above is not a spa, its a clone of Venia project using CIF components, here the react component are rendered using invididual id's, and this is not a spa.

first this is not a spa project, I want something like this https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s... but without making an api call to http://localhost:4502/content/wknd-spa-react/us/en.model.json but receive the data as a props using Mapto, is that possible.

MapTo('wknd-spa-react/components/image')(Image, ImageEditConfig);

Simply I want create a project with AEM Project Archetype with React where i want to use CIF components which doesnt work.

[Pavan_Kalyan]

hello @mrkumar82 

as per my understanding 

How to integrate AEM with Magento e-Commerce platform through CIF framework - YouTube

this could give an overview on how to integrate your react custom component with props in cif-venia project.

comment if this doesn't work.

[sudhasg]

@Pavan_Kalyan @milind_bachani 

The project is not built out of react frontend module and it is not a spa project , its created using mvn archytype with frontend module as general and includeCommerce=y, using CIF framework.so is it possible to create custom aem react component using mapto Function since this is not a complete spa. 

The requirment is to use the spa editors in aem for cif components using mapto functionality. 

is CIF components are compatible with spa editors in AEM?

Please let know if you have such examples created.

[mrkumar82]

Any idea on the above requirement

[Eduardosorbor]

Hi, I am having the same issue. I have tried a lot of solutions and I dit not have success. I did not find any internet material about this topic. We are using AEM Venia Demo (https://github.com/adobe/aem-cif-guides-venia) and we cannot create a React.js component with props that can be editable on AEM dialogs. Only we can create static React.js components. Did someone already created a React.js component with the AEM Venia Demo? Please, we need solve this issue.