---
title: "Use dynamic placeholders in components"
slug: "use-dynamic-placeholders-in-components"
abstract: "How to configure your components to use dynamic placeholders."
---
# Use dynamic placeholders in components

You can use dynamic placeholders to generate unique placeholder keys for every component on the page. In some cases, multiple placeholder keys are generated within a single component, for example, when you add columns to the Column Splitter component.

This walkthrough describes how to configure a component to use dynamic placeholders:

- [Use dynamic placeholders in components](https://doc.sitecore.com/xp/en/developers/sxa/105/sitecore-experience-accelerator/use-dynamic-placeholders-in-components.html#use-dynamic-placeholders-in-components)
- [Add the `IsRenderingsWithDynamicPlaceholders` property to the component](https://doc.sitecore.com/xp/en/developers/sxa/105/sitecore-experience-accelerator/use-dynamic-placeholders-in-components.html#add-the-isrenderingswithdynamicplaceholders-property-to-the-component)
- [Add the `IDynamicPlaceholder` base template to the rendering parameters template](https://doc.sitecore.com/xp/en/developers/sxa/105/sitecore-experience-accelerator/use-dynamic-placeholders-in-components.html#add-the-idynamicplaceholder-base-template-to-the-rendering-parameters-template)
- [Define the placeholder key using a wildcard](https://doc.sitecore.com/xp/en/developers/sxa/105/sitecore-experience-accelerator/use-dynamic-placeholders-in-components.html#define-the-placeholder-key-using-a-wildcard)
- [Link the placeholder settings item to the component](https://doc.sitecore.com/xp/en/developers/sxa/105/sitecore-experience-accelerator/use-dynamic-placeholders-in-components.html#link-the-placeholder-settings-item-to-the-component)
- [Define the placeholder key in the component TSX file](https://doc.sitecore.com/xp/en/developers/sxa/105/sitecore-experience-accelerator/use-dynamic-placeholders-in-components.html#define-the-placeholder-key-in-the-component-tsx-file)

## Add the `IsRenderingsWithDynamicPlaceholders` property to the component

Add the `IsRenderingsWithDynamicPlaceholders` property to your component to enable the resolving of the dynamic placeholders and the components inside of them.

To add the `IsRenderingsWithDynamicPlaceholders` property to the component:

1. In the content tree, navigate to */sitecore/Layout/Renderings/Feature/Headless Experience Accelerator* and click the component you are interested in.
2. In the **Other properties** field, enter the `IsRenderingsWithDynamicPlaceholders` property and set its value to *true*.

    ![ce-rendering-property.png](https://doc.sitecore.com/api/markdown-image/xp/en/developers/sxa/105/sitecore-experience-accelerator/images/ce-rendering-property.png)

3. Save your changes.

## Add the `IDynamicPlaceholder` base template to the rendering parameters template

Adding the `IDynamicPlaceholder` base template to the rendering parameters template of a component gives it a new parameter named `DynamicPlaceholderId`. This parameter dynamically assigns IDs to the placeholder key.

To add the `IDynamicPlaceholder` base template:

1. In the content tree, navigate to the *Rendering Parameters* folder and select the rendering parameters template.

    > [!note]
    > The folder's location can differ depending on your instance, but it is typically found in */sitecore/Templates/Feature*.

2. On the **Content** tab, navigate to */Templates/Foundation/Experience Accelerator/Dynamic Placeholders/Rendering Parameters*.
3. Double-click the *IDynamicPlaceholder* item to move it to the **Selected** section. The following screenshot shows the rendering parameters template of the built-in Container component.

    ![The IDynamicPlaceholder base template](https://doc.sitecore.com/api/markdown-image/xp/en/developers/sxa/105/sitecore-experience-accelerator/images/headless-site-add-idynamicplaceholder-base-template.png)

## Define the placeholder key using a wildcard

You use a wildcard to as part of the definition of the placeholder key. As a result, whenever an instance of the component is added to the placeholder, the `DynamicPlaceholderId` parameter generates a unique ID that dynamically replaces the wildcard used in the placeholder key value, for example *myrendering-1*, *myrendering-2*, and so on.

To define the placeholder key:

1. In the content tree, navigate to the placeholder settings item of the component that you want to enable dynamic placeholders for. Depending on where your components are stored, the settings item might be in one of the following locations:
    - */sitecore/Layout/Placeholder Settings/Feature*.
    - */sitecore/Layout/Placeholder Settings/Project*.

    > [!note]
    > If the settings item does not already exist, create one and name it according to how the component is named.

2. Click the settings item and, in the **Placeholder Key** field, enter the name of the component as defined in the component TSX file followed by *\-{\*}*, for example *myrendering-{\*}*.
3. Save your changes.

## Link the placeholder settings item to the component

To be able to render the components inside the placeholder, link the placeholder settings item with the component through the Layout Service.

To link the placeholder settings item to the component:

1. In the content tree, navigate to *sitecore/Layout/Renderings/Feature*, open the folder that holds the component, and then click the component.
2. In the **Layout Service Placeholders** field, navigate to the placeholder settings item that you configured previously.
3. Double-click the placeholder settings item to add it to the **Selected** pane.

    ![headless-site-link-placeholder-settings-item-with-rendering.png](https://doc.sitecore.com/api/markdown-image/xp/en/developers/sxa/105/sitecore-experience-accelerator/images/headless-site-link-placeholder-settings-item-with-rendering.png)

## Define the placeholder key in the component TSX file

In the component TSX file, when you define the placeholder component, you need to pass the name in the **Placeholder Key** field to the `phKey` constant. Instead of a wildcard, you need to use the dynamic placeholder ID from the rendering parameters.

Code example:

```javascript
const phKey = `myrendering-${props.params.DynamicPlaceholderId}`;
<Placeholder name={phKey} rendering={props.rendering} />

```