How to search by children in a component?

Question

React

Hello colleagues :)
I need your help again. I started making a tab+page component. We make a layout like this:

<MyPages>
  <page>
    <tab>Заголовок вкладки</tab>
    <content>текст при активной вкладке</content>
  </page>
  <page>
    <tab>Заголовок вкладки</tab>
    <content>текст при активной вкладке</content>
  </page>
</MyPages>

When rendering this component, I get all the children (pages) through props.children and go through them with a map. In each iteration, I take out more children and make the first of them a tab, the second a page.
So the question is: did I organize the processing of children correctly? Or is there some better way? A la child.$('tab').each

Answer 1

There is a *React.Children.map* method for such purposes, although there is a possible solution

<MyPages>
  <Page tab={} content={} />
  <Page tab={} content={} />
<MyPages/>

This structure can be created immediately without connecting the first method. That is, if initially there is a structure of type

pages = [
  {tab='Заголовок вкладки', content='текст при активной вкладке'},
  {tab='Заголовок вкладки', content='текст при активной вкладке'}
]

It can immediately be rendered into pages