Passing Data to Children Components in Placeholders (SitecoreAI)

In the following post, we will explore how to pass custom data to Sitecore components added by editors within placeholders. This solution works with Sitecore Headless / SitecoreAI, utilizing Headless SXA and Next.js as the development platform.

The Problem

While developing a project for one of our clients in SitecoreAI (formerly Sitecore XM Cloud) with Headless SXA, we implemented components that use one of SXA's most valuable features: rendering variants. This works great out of the box, making editors' lives easier. However, we had a specific requirement for "container" components, that is, components that had a placeholder where other "smaller" components could be included, such as a card container with several cards arranged in a grid.

The "container" component had its own rendering variants, and also the components that could go inside that container component could have their own variants. This is because many of those same "children'' components could be reused in other parts. The problem for the editor is that they need to set the desired variant for the container component and ensure that they select the matching variant for each component inside the placeholder. We devised a solution that allowed the editor to choose the variant at the container level, which would automatically set the matching variant for the children components in the placeholder.

The Solution

The Placeholder component provided by Sitecore, besides providing the frequently used name, rendering, and layoutData props, also provides a render prop that enables control over the renderings inside that placeholder with a custom function:

<Placeholder
  name="placeholder-key"
  rendering={rendering}
  layoutData={layoutData}
  render={(components) => someFunction(components)}
/>

We will develop a function that allows adding custom parameters to the props of each component added to the placeholder. The render prop is a function definition that provides an array of components inside the placeholder (as ReactNodes, which are actually ReactElements). We are using this array to iterate through each component inside the placeholder. However, there is a limitation: you cannot modify the props of an existing component at runtime. Fortunately, the React framework ( the base of the Next.js framework) allows you to clone a component and assign new props while cloning the component. We will leverage this functionality to "inject" our custom parameters into props.params for each of the placeholder's children components:

import { ComponentParams } from '@sitecore-jss/sitecore-jss-nextjs';
import React, { ReactElement, ReactNode } from 'react';
 
export const injectCustomParams = (
  components: ReactNode[], //This will be provided by the render prop in Placeholder
  params: ComponentParams //This will be provided by the developer customizing the call
): ReactNode[] => {
  const finalComponents: ReactNode[] = [];
 
  components.forEach((component) => {
    //All components in a Sitecore placeholder are ReactElements
    const componentAsElement = component as ReactElement;
 
    //Use React.cloneElement to clone the component object
    const clonedComponent = React.cloneElement(componentAsElement, {
      //Use current component's params, and add our custom params
      params: { ...componentAsElement.props.params, ...params },
    });
 
    //Add the modified component to the list
    finalComponents.push(clonedComponent);
  });
 
  //Return the modified components
  return finalComponents;
};

We recommend creating this code file inside src/lib.

To use this function, let's use a simple example. A container component has multiple variants, and each variant has a placeholder where child components can be placed:

type ContainerComponentProps = ComponentProps & {
  layoutData: LayoutServiceData;
  fields: {
    // Some field definitions here
  };
};
 
export const ContainerOneColumn = (
  props: ContainerComponentProps
): JSX.Element => {
  // Some code here
  return (
    <Placeholder
      name="center-col"
      rendering={props.rendering}
      layoutData={props.layoutData}
    />
  );
};
 
export const ContainerTwoColumn = (
  props: ContainerComponentProps
): JSX.Element => {
  // Some code here
  return (
    <>
      <Placeholder
        name="center-col"
        rendering={props.rendering}
        layoutData={props.layoutData}
      />
      <Placeholder
        name="right-col"
        rendering={props.rendering}
        layoutData={props.layoutData}
      />
    </>
  );
};

We want to "let know" the children components in those placeholders the variant its parent is using. For this, we use our injectCustomParams function in the render prop of the placeholders and set a custom variant param to the name of the variant:

<Placeholder
  name="center-col"
  rendering={props.rendering}
  layoutData={props.layoutData}
  render={(components) => {
    injectCustomParams(components, { variant: 'ContentOneColumn' })
  }
/>
 
...
 
<Placeholder
  name="center-col"
  rendering={props.rendering}
  layoutData={props.layoutData}
  render={(components) => {
    injectCustomParams(components, {variant: 'ContentTwoColumn' })
  }
/>

On the child component code (the code of the component that will be included in the parent's placeholder by the editor), read the props.params.variant value to determine its parent variant and render accordingly:

export const ChildComponent = (props: ChildComponentProps): JSX.Element => {
  // Some component code here
  return props.params.variant === "ContainerOneColumn" ? (
    <div className="oneColumnClass">
      {/* Rendering logic for one column */}
    </div>
  ) : props.params.variant === "ContainerTwoColumn" ? (
    <div className="twoColumnClass">
      {/* Rendering logic for two column */}
    </div>
  ) : (
    <div className="default">
      {/* Rendering logic when no variant is specified */}
    </div>
  );
};

Conclusion

The Placeholder component's render prop allows flexibility, rendering the components placed inside by editors. This will enable us to handle scenarios such as multiple rendering logic based on the parent component's variant.