How do you create Components with children like Tabs, Carousels, Search Results or List of Cards?

Question

I am just transitioning from Sitecore MVC to SitecoreNextJs. I have been able to create simple components fairly easily, but haven't been able to create components with children, like tabs, carousels, search results or a list of cards. I referred to this article with placeholders:

https://doc.sitecore.com/xp/en/developers/hd/200/sitecore-headless-development/walkthrough--creating-a-new-component-in-a-jss-next-js-app-using-the-sitecore-first-development-workflow.html

but the code throws errors (since I am using TypeScript). Could anyone please point me to some documentation/examples?

Thanks!

Answer 1

This Sitecore docs page will probably be the most helpful to you:

https://doc.sitecore.com/xp/en/developers/hd/201/sitecore-headless-development/working-with-placeholders-in-a-jss-next-js-app.html

Otherwise, here is an example of a simple placeholder-style component in TypeScript.

Not much setup is required on the Sitecore side for very basic placeholder components. In your wrapper rendering:

/sitecore/layout/Renderings/Feature/MyWrapperComponent, add a placeholder key in the Layout Service Placeholders field that defines which renderings can be added to your placeholder.

Here is your wrapper component:

MyWrapperComponent.tsx

import { Placeholder } from '@sitecore-jss/sitecore-jss-nextjs';
...
return(
    <>
        <Placeholder name="myWrapperComponentItems" rendering={props.rendering} myArbitaryProp={true} />
    </>
);
...

MyWrapperComponentItem.tsx

...

type MyWrapperComponentItemProps = ComponentProps & MyWrapperComponentItem & {
    fields: {
      ... 
    };
    myArbitaryProp: boolean;
  };

const MyWrapperComponentItem = (props: MyWrapperComponentItemProps): JSX.Element => {
  const { fields } = props;

  // Can use myArbitaryProp in here if desired

  return (
    <>
      <RichText field={fields.myField} />
    </>
  );
};

...

After adding the components to the page, the layout service should return something like this:

{
    "uid": "xxxxxxx-xxxxxx-xxxx-xxxx-xxxxxx",
    "componentName": "MyWrapperComponent",
    "dataSource": "",
    "params": {},
    "placeholders": {
        "myWrapperComponentItems": [
            {
                "uid": "xxxxxxx-xxxx-xxxx-xxxx-xxxxxx",
                "componentName": "MyWrapperComponentItem",
                "dataSource": "{xxxxxxxx-xxxxx-xxxx-xxxx-xxxxxxx}",
                "params": {},
                "fields": {
                    ...
                }
            },
            {
                "uid": "xxxxxxx-xxxx-xxxx-xxxx-xxxxxx",
                "componentName": "MyWrapperComponentItem",
                "dataSource": "{xxxxxxxx-xxxxx-xxxx-xxxx-xxxxxxx}",
                "params": {},
                "fields": {
                    ...
                }
            }
        ]
    }
}