How to set up a placeholder inside of a component in JSS?

Question

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?

Answer 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.