Tabsjs

// Assuming:
//   <Tabs>
//     <Tab title="">...</Tab>
//     <Tab title="">...</Tab>
//     <Tab title="">...</Tab>
//   </Tabs>


function Tabs({ children }) {
  const tabs = React.Children.toArray(children);
  const [selectedTabTitle, setSelectedTabTitle] = useState(tabs[0].props.title);
  const selectedTab = tabs.find(tab => tab.props.title === selectedTabTitle);

  return (
    <TabsContainer>
      <TabBar>
        {tabs.map(tab => <ClickableTab onClick={() => setSelectedTabTitle(tab.props.title)} ... />)}
      </TabBar>
      <CurrentTab>
        {selectedTab}
      </CurrentTab>
    </TabsContainer>
  );
}