title: I'm building a component that dynamically generates tabs, can't figure out how to pass in titles to dynamically name those tabs
body: <p>I have a menu/navbar component I'm building that dynamically generates tabs for each of the children components passed into it.</p>
  
  <p>Everything works properly the only issue I'm running into now is that I can't figure out how pass in titles to also name the tabs.</p>
  
  <p>Right now I'm just generically rendering <code>Tab 1, Tab 2, etc.</code> but I'd like to pass in a title for each child component and have the tab display that value instead so like:</p>
  
  <pre><code>&lt;Tabs&gt;
    &lt;div title={"Overview"}&gt;
      &lt;h1&gt;This is the Overview tab&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div title={"About"}&gt;
      &lt;h1&gt;This is the About tab&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/Tabs&gt;
  </code></pre>
  
  <p>This is my current Tabs Component:</p>
  
  <pre><code>import React, { useState, useMemo } from 'react';
  import styled from 'styled-components';
  
  type Props = {
    children: React.ReactNode;
  };
  
  const Tabs = (props: Props) =&gt; {
    const { children } = props;
    const [tab, setTab] = useState(0);
    const childrenList = React.Children.toArray(children);
  
    const generateTabs = (amount: number) =&gt; {
      let list = [];
  
      // This is where I generate the tabs and name them
      for (let i = 0; i &lt; amount; i++) {
        list.push(&lt;StyledTabs onClick={() =&gt; setTab(i)}&gt;Tab {i + 1}&lt;/StyledTabs&gt;);
      }
      return list;
    };
  
    const current = useMemo(() =&gt; childrenList[tab], [tab]);
    const tabs = generateTabs(childrenList.length);
  
    return (
      &lt;div&gt;
        &lt;div&gt;{tabs}&lt;/div&gt;
        &lt;div&gt;{current}&lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Tabs;
  
  const StyledTabs = styled.button`
    border: none;
    display: inline-block;
  `;
  </code></pre>
  
  <p>And this is where it's being used:</p>
  
  <pre><code>...
  return (
          &lt;Tabs&gt;
            &lt;div&gt;
              &lt;h1&gt;THIS IS TAB 1&lt;/h1&gt;
            &lt;/div&gt;
            &lt;div&gt;
             &lt;h1&gt;AND HERE'S TAB 2&lt;/h1&gt;
            &lt;/div&gt;
          &lt;/Tabs&gt;
  )
  </code></pre>