Passing Data to Child Components in Sitecore XM Cloud Placeholders

In the following post, we will look at how to pass custom data to Sitecore components added by editors inside Placeholders. This solution works in Sitecore Headless / XM Cloud with Headless SXA, using Next.js as the development platform.

The Problem

While developing a project for one of our clients in Sitecore XM Cloud with Headless SXA, we implemented components that use one of SXA's most useful features: rendering variants. This works great out of the box, and it makes editors' lives easier. But we had a specific requirement for "container" components, that is components that had a placeholder in them where other "smaller" components could be included, like, for example, 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 make sure to select the matching variant for each of the components inside of the placeholder. We thought of a solution that allowed the editor to only choose the variant at the container level, and this would automatically set the matching variant to 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 the components inside of the placeholder (as ReactNodes that, in reality, are ReactElements.) We are using this array to iterate through each component inside the placeholder. But there is a limitation: you cannot modify in runtime the props of an existing component. Fortunately, the React framework ( the base of the Next.js framework) allows you to clone a component, and assign new props during the cloning of 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 children 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 what is 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 allows us to handle scenarios such as multiple rendering logic based on the parent component's variant.