Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to use Tabs component #235

Open
sarathBM opened this issue Feb 10, 2024 · 1 comment
Open

Unable to use Tabs component #235

sarathBM opened this issue Feb 10, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@sarathBM
Copy link

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

@sarathBM sarathBM added the bug Something isn't working label Feb 10, 2024
@Lore90Ad
Copy link

Lore90Ad commented Apr 8, 2024

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}
 ;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants