title: Placing children of a component into a different component
body: <p>I want to create a component which takes the children provided to it and displays them in a different component.</p>
  <p>For example, let's say I have the following layout:</p>
  <pre><code>&lt;Layout&gt;
      &lt;PageContent /&gt;
      &lt;Sidebar /&gt;
  &lt;/Layout&gt;    
  
  </code></pre>
  <p>...and within the <code>PageContent</code>, I want to use another component (e.g. <code>&lt;SidebarContent&gt;</code>), such that the children given to the <code>SidebarContent</code> component are rendered as children of the <code>Sidebar</code>.</p>
  <p><strong>Example PageContent</strong>:</p>
  <pre><code>import { useState, useEffect } from 'react'
  
  const PageContent = () =&gt; (
      &lt;&gt;
          &lt;p&gt;Page Content&lt;/p&gt;
          &lt;SidebarContent&gt;Sidebar Content&lt;/SidebarContent&gt;
      &lt;/&gt;
    )
  }
  
  export default PageContent
  </code></pre>
  <p>What is considered best practice for achieving this?</p>