React SPA AEM Get Container Core Component ID

[adf33avs]

I'm following the code here: https://github.com/schoudry/eaem-extensions/tree/master/eaem-65-extensions/eaem-sites-spa-dm-video-c...

to create a React component that extends AEM Container core component so that I can get an ID that is set in the container dialog into the React component as a prop.  However, when I try to add the container to the page, nothing shows in the UI, although I can see it in the CRXDE. 

I've tried multiple different variations of this just so I can get the ID of a container, but nothing seems to work with the SPA editor.

Is this the proper way to get the ID of the container as a prop in a React component, or is there an easier way without extending the Container core component?

[Arun_Patidar]

Hi,

Have you tried core components https://github.com/adobe/aem-react-core-wcm-components

for extending core components you can check below 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-extend-responsivegr...

[adf33avs]

I have tried that exact code for extending the Responsive Grid core component, but the problem is that Responsive Grid does not have a dialog, and whenever I tried to add a dialog in ui.apps, it would break the responsive grid.  I've seen that problem mentioned here before also.  

The code I originally posted here is extending the Container core component, and that comes with a dialog out of the box, although I can't find a configuration to get it to render when dragged into the editor.

After more research, I'm now wondering if there is just another way to get the ID from the container core component without extending it in the React component.  I tried using the model.json added to the end of the page url, and that does have information about the container, but unfortunately does not contain the properties set in the authoring dialog.

Do you know of another way to get the properties from the author dialog?

[Arun_Patidar]

I was using the container component for aem core and that does have the dialog. you can explore that.

https://github.com/adobe/aem-react-core-wcm-components-spa/tree/master/src/container/container/v1