I am learning Sitecore JSS with Next Js as the front end framework. I am working in Sitecore first approach with Sitecore 10.1. I was trying to develop a three column component which will have a placeholder in each of the column and in each of the placeholder there will be some component. The issue I am facing is the name of the placeholder should be different for each of the placeholder otherwise components will repeat in each placeholder. How can we dynamically generate placeholders in Sitecore jss ?
import { Text, Field, withDatasourceCheck, RichText, Placeholder } from '@sitecore-jss/sitecore-jss-nextjs';
import { ComponentProps } from 'lib/component-props';
type ThreeColumnProps = ComponentProps & {
fields: {
title: Field<string>;
description: Field<string>;
};
};
const ThreeColumn = (props: ThreeColumnProps): JSX.Element => (
<div className="three-column">
<Text field={props.fields.title} />
<RichText field={props.fields.description} />
<div className="column">
<Placeholder name="jss-sample-placeholder" rendering={props.rendering} />
</div>
<div className="column">
<Placeholder name="jss-sample-placeholder1" rendering={props.rendering} />
</div>
<div className="column">
<Placeholder name="jss-sample-placeholder2" rendering={props.rendering} />
</div>
</div>
);
export default withDatasourceCheck()<ThreeColumnProps>(ThreeColumn);