adobe / aem-react-editable-components

SPA React Editable Components for Adobe Experience Manager
Apache License 2.0
61 stars 28 forks source link

Unable to use Tabs component #235

Open sarathBM opened 8 months ago

sarathBM commented 8 months ago

Hi All,

I am using AEM artifact 47 with extending react version to 18 and aem-react-editable-componnets version 2.1.1

I am able to use container component with aem-react-editable-componnets version 2.1.1, but unable to use Tabs component, I have done mapping Tabs component to Core AEM tabs component I am getting below issue image

Below is the one using package.json "dependencies": { "@adobe/aem-react-editable-components": "^2.1.1", "@adobe/aem-spa-component-mapping": "1.1.1", "@adobe/aem-spa-page-model-manager": "1.5.0 ", "custom-event-polyfill": "^1.0.7", "history": "^5.3.0", "neom-ui": "github:NEOM-KSA/Neom-UI#develop", "react": "^18.2.0", "react-app-polyfill": "^3.0.0", "react-dom": "^18.2.0", "react-router-dom": "^6.21.3", "sanitize-html": "^2.11.0", "util": "^0.12.5" },

Here is the code UI.frontend component code import { MapTo, Container,
ResponsiveGrid } from '@adobe/aem-react-editable-components';

const MyTabsEditConfig = { emptyLabel: 'Tabs', isEmpty: function(props){ return !props.cqItemsOrder || !props.cqItemsOrder.length ===0 } }

const MyTabs = (props) =>

{ const tabItemsInOrder = Container.getChildComponents(props); const tabItemsJsx = tabItemsInOrder.map((tabItemJsx) =>

{tabItemJsx}
); return
{tabItemsJsx}
; }

export default MapTo('neom-authority-platform/components/tabs')(MyTabs, MyTabsEditConfig);

After integrating the code I am gettin the error clientlib-react.js:2 TypeError: pe.Container.getChildComponents is not a function at emptyLabel (clientlib-react.js:2:149121)

Can any one help with This issue

Lore90Ad commented 7 months ago

Try importing getChildComponents

import { EditableComponent, getChildComponents, MapTo } from "@adobe/aem-react-editable-components";

const MyTabs = (props) =>

{
  const tabItemsInOrder = getChildComponents(props);
  const tabItemsJsx = tabItemsInOrder.map((tabItemJsx) =>

  {tabItemJsx}
 );
 return
 {tabItemsJsx}
 ;
}