title: react - children component not showing
body: <p>I'm trying to insert a child component inside another child component, but my code is not working. Following codes are the structure i'm trying to build.</p>
  
  <pre><code>const AddProductPage= () =&gt; {
      return (
          &lt;PageTemplate&gt;
              &lt;ProductTemplate&gt;
                  &lt;AddProduct /&gt;
              &lt;/ProductTemplate&gt;
          &lt;/PageTemplate&gt;
      );
  };
  </code></pre>
  
  <pre><code>const PageTemplate= ({children}) =&gt; {
      return (
          &lt;div className={cx('pagetemplate')}&gt;
              &lt;HeaderContainer /&gt;
              &lt;main&gt;
                  {children}
              &lt;/main&gt;
              &lt;Footer /&gt;
          &lt;/div&gt;
      );
  };
  </code></pre>
  
  <pre><code>class ProductTemplate extends Component {
      render() {
          return (
              &lt;div className={cx('product-template')}&gt;
                  ...
                  &lt;div className={cx('display')}&gt;
                      {this.props.children}
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <pre><code>class AddProduct extends Component {
      render() {
          return (
              &lt;div className={cx('addproduct')}&gt;
                  addproduct
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>I'm trying to insert AddProduct component in ProductTemplate component as a child, which is inserted in PageTemplate component as a child. AddProductPage, however, is not showing AddProduct component. I'd be grateful if anyone can help.</p>