React Tabs without TabsContent and Tab

[literat]

I think that it is not necessary using Tab and TabsContent for a developer. Maybe the structure can be simplified to

<Tabs>
  <TabItem />
  <TabItem />
  <TabPane />
  <TabPane />
</Tabs>

ba using React.Children to parse children and sort them into items and panes arrays and then render in Tab wrapper and TabContent wrapper.

References:

• https://stackoverflow.com/questions/45864785/filter-out-children-of-a-react-component
• https://reactjs.org/docs/react-api.html#reactchildren
• https://stackoverflow.com/questions/43913054/reactjs-react-children-foreach-can-i-get-the-child-component-name
• https://www.smashingmagazine.com/2021/08/react-children-iteration-methods/

[adamkudrna]

IMO, this is rather a halfway solution. I can imagine:

a) No magic:

<Tabs>
  <TabList>
    <TabItem />
    <TabItem />
  </TabList>
  <TabContent>
    <TabPane />
    <TabPane />
  </TabContent>
</Tabs>

b) Full magic:

<Tabs>
  <TabPane title="pane 1" active />
  <TabPane title="pane 2" />
</Tabs>

I think this is related to/duplicated by #365.