title: React Render a parent only when Child is rendered
body: <p>I would like to know if there is a way to only render a parent component when its child is rendered and vis versa. If you google the title you find quite a few entries but nothing the would work for my case because my elements aren't <code>undefined</code> or <code>null</code>, for example. Imagine a Parent:</p>
  
  <pre><code>class Parent extends React.Component {
    constructor(props){
      super(props);
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div className="container"&gt;
            {this.props.children}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>The following child might be depended on some settings. For instance, only show if a boolean is true.</p>
  
  <pre><code>class Child extends React.Component {
        constructor(props){
          super(props);
          const showChild = Settings.get(...);
          this.state = {
             visible:showChild
          }
        }
  
        render() {
          const showHello = this.state.visible ? &lt;div&gt;Hello&lt;/div&gt; : "";
          return (
            &lt;div&gt;{showHello}&lt;/div&gt;
          );
        }
      }
  </code></pre>
  
  <p>In my layout I scaffold it like this:</p>
  
  <pre><code>class Layout extends React.Component {
    constructor(props){
      super(props);
    }
  
    render() {
      return (
        &lt;Parent&gt;
          &lt;Child /&gt;
        &lt;/Parent&gt;
      );
    }
  }
  </code></pre>
  
  <p>Is it possible to unmount <code>Parent</code> if that <code>Child</code> element is not rendered? Thank you.</p>
  
  <p>Update: A use case is if I want this <code>Parent</code> and <code>Child</code> to be in a <code>Layout</code> and <code>Parent</code> has a container class with a larger padding or margin because it is still in the component tree. If Child isn't rendered a large gap remains within the Layout and it just looks odd.</p>