1

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
  • Have you allow the placeholder in the Layout Service Placeholders on the Layout and rendering item in Sitecore? – Hishaam Namooya Jul 10 at 14:12
  • That's a helpful tip @HishaamNamooya. In this case, that was not the issue. Please see the answer I posted. – Marcel Gruber Jul 12 at 14:02
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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