2

I have a React component that can be placed inside of the default jss-main placeholder. I would like this component to have a placeholder contained within it, but the placeholder does not appear in Experience Editor when I deploy to my sitecore instance:

const ContactForm = ({ title, text, route, fields, history }) => {
    return (
      <StyledContactForm id="contact-form" className="global-padding-all">
        <div className="content">
          <div className="content-text">
            {title && <Text tag="h2" className="h1" field={title} />}
            {text && <RichText field={text} />}
          </div>
  
          {/* NOT WORKING */}
          <Placeholder
            name="nested-placeholder"
            rendering={route}
          />
  
        </div>
      </StyledContactForm>
    );
  };

There are no errors whatsoever, and I have verified that I added the new placeholder in all of the necessary locations within the code. I also verified that the placeholder key item exists in Sitecore. When I load the page in Experience Editor, I also don't see any elements with the class scEmptyPlaceholder, so I presume this isn't an issue with the placeholder area being hidden / too small to see.

Is what I'm trying to do possible? If so, what is the issue?

2
  • 1
    Have you allow the placeholder in the Layout Service Placeholders on the Layout and rendering item in Sitecore? Jul 10, 2021 at 14:12
  • That's a helpful tip @HishaamNamooya. In this case, that was not the issue. Please see the answer I posted. Jul 12, 2021 at 14:02

1 Answer 1

1

In this case, the issue turned out to be that the object I was passing to the placeholder was incorrect.

Before

<Placeholder name="jss-contact-form" rendering={props} />

After

<Placeholder name="jss-forms" rendering={rendering} />

What was confusing was that when I passed {props} to rendering, there was a console log saying that there was no placeholder called jss-forms even though I saw it contained within the object. The problem is that it was nested one layer deeper than the placeholder was expecting and so I had to pass the rendering object instead.

2
  • A little more info would be appreciated. The code in your question doesn't mention "props" or "rendering" at all, so your solution doesn't make any sense to me (most likely because I'm missing some obvious bit of information a non-newbie would know?)
    – Michael
    Dec 19, 2023 at 20:02
  • @Michael props refers to the properties passed to the component. In the context of JSS, rendering is the specific data provided by Sitecore for a particular component instance. These are "baked" into the frameworks, so that's why developers often gloss over them. To further clarify, the props in my original code didn't contain the necessary data for the placeholder, which is why I didn't see the expected behaviour in Experience Editor. By switching to the correct rendering object, I aligned with the expected data structure, allowing the nested placeholder to work as intended. Dec 19, 2023 at 23:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.