CODEWITHSUNDEEP
reactjs
vuvu
vuvu

Reputation: 5328

How to set child information in the parent container?

I'm working on a react project. A new view requires children information inside a component that belongs to the parent. I wonder if the whole component architecture needs to be changed, or is there a simpler way. The app header shall contain a select that belongs to the {children}.

Structure

<Maincontainer>
  <AppHeader />  //here I need a select box according to the active children
  {children}
</MainContainer>

Upvotes: 1

Views: 35

Answers (2)

Bernd Prager
Bernd Prager

Reputation: 99

Why can't you use children as property for the AppHeader?

<Maincontainer>
  <AppHeader children={children} />  //here I need a select box according to the active children
  {children}
</MainContainer>

Upvotes: 0

Amid
Amid

Reputation: 22352

Whenever such case occurs it is an indication of the need to move the required information up in the component hierarchy. It is no longer a "child information".

In you case you should move it from children's state to Maincontainer state. Then pass it down via props to AppHeader and / or other children.

You can read more about this technique here.

Upvotes: 1

Related Questions