using children's props in Parent Component

Question

I'm practicing React Children API. I want to render only one component of children components and make Tab component using children Array. children component have tabTitle props, and I want to use that props in Parent component is it okay to use children's props in Parent Component? i'm not sure this way isn't normal way...

  <MainPage>
        <SubPage
          title={"1"}
          tabTitle="a"></SubPage>
        <SubPage
          title={"2"}
          tabTitle="b"></SubPage>
        <SubPage
          title={"3"}
          tabTitle="x"></SubPage>
        <SubPage
          title={"4"}
          tabTitle="d"></SubPage>
      </MainPage>

//MainPage
 const tabs = Children.map(children, (child, index) => {
    return <div>{child.props.tabTitle}</div>
  })//I want to use like this

Answer 1

It's totally correct. We can use children props in parent component. now you have data in tabs variable so just need to call this in your MainPage component. Code looks correct.

 <div>{tabs}</div>