title: Creating Custom Components and Nesting them
body: <p>I am interested in doing something like below in my React Applications i.e. create my Custom Components and nest them in the return statement:</p>
  
  <p>eg:</p>
  
  <pre><code>render(){
      return(
          &lt;ShoppingApp&gt;
              &lt;Products&gt;
                  &lt;ProductDetail productID={product_id} /&gt;
              &lt;/Products&gt;
          &lt;/ShoppingApp&gt;
      );
  }
  </code></pre>
  
  <p>Questions:</p>
  
  <ol>
  <li><p>Is the above possible / feasible using ReactJS ?</p></li>
  <li><p>If the answer to 1 is yes, then what will be the practical scenario when this structure can be used / benefits (an example would help in understanding)</p></li>
  <li><p>How to implement this kind of nesting with custom components?</p></li>
  </ol>
  
  <p>PS: I already know the syntax where we can include a component in JSX inside div, table, . . . , but the question here is how to implement nesting Custom components inside each other in a hierarchy (like described above).</p>
  
  <p>Thanks in advance.</p>