title: How to make my custom tab component work with passing index to children and hiding panes?
body: <p>I'm trying to create a custom Tabs component so I can learn react more, however I'm stuck.</p>
  
  <p>There are three components and is inspired by Material-UI tabs. Tabs, Tab, and TabPane.</p>
  
  <p>Tabs.js</p>
  
  <pre><code>const Tabs = (props) =&gt; {
      const { children, defaultTab } = props;
      const [activeTab, setActiveTab] = useState(defaultTab);
      const onTabClick = (clickedTab = 0) =&gt; {
          setActiveTab(clickedTab);
      }
      return (
          &lt;div className="tabs"&gt;
              {children}
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>This should hold the activeTab state and be able to tell Tab and TabPane of an active tab (or should it?).</p>
  
  <p>Tab.js</p>
  
  <pre><code>const Tab = (props) =&gt; {
      const { label } = props;
      return (
          &lt;li className="tabs-tab" onClick={  }&gt; {label} &lt;/li&gt;
      )
  }
  
  export default Tab;
  </code></pre>
  
  <p>The Tab component has <code>onClick</code> and a label. However, I'm not sure how to pass the function <code>onTabClick</code> from <code>Tabs</code> to this component via children.</p>
  
  <pre><code>TabPane.js
  const TabPane = (props) =&gt; {
      const { children } = props;
      return (
          &lt;div className="tabs-tab-pane"&gt;
              {children}
          &lt;/div&gt;
      )
  }
  
  export default TabPane;
  </code></pre>
  
  <p>This is the container for content for each Tab. I'm not sure how to fetch the data in Tabs from here so I know when to hide the pane.</p>
  
  <p>Here is a code share:</p>
  
  <p>Here's a url to view this code and a preview: <a href="https://codesandbox.io/s/objective-mendel-752qe?fontsize=14" rel="nofollow noreferrer">https://codesandbox.io/s/objective-mendel-752qe?fontsize=14</a></p>
  
  <p>How do I get this functional?</p>