How to pass props to nested components

[steezeburger]

I have a Redux container for my storefront page that has some sidebars and such as well as a nested component that displays either a menu or a product panel via this.props.children. How can I pass my props to these children elements?

I found a closed issue that suggested creating a new template like element and returning this element applied to the context, but this seems messy.

Any cleaner solutions?

[nippur72]

Do you mean passing components into props? See #103

[steezeburger]

I'm using React Router and have definitions like

<Route path="/" component={App}>
    <Route component={StoreFront} >
        <Route path="menu" component={Menu} />
        <Route path="product-panel" component={ProductPanel} />
    </Route
    <Route path="*" component={NotFoundRoute} />
</Route>

Product Panel and Menu are both nested components of Storefront
Storefront.rt looks something like

<div class="container>
    { this.props.children }
</div>

which renders either Menu.js or ProductPanel.js based on my current location.

My issue is that I'm not sure how to pass props into this child element. Storefront here is a Redux container element that maps some of my state to props e.g. my menu items. If I just had a Menu element, I could have <Menu rt-props="{menuItems: this.props.menuItems}" />, but since it's a child element, I'm not sure.

I may be misunderstanding your reply, but I'm not sure how to accomplish what I need with your suggestion.

Edit: after reading about React contexts, that may be a solution, but it seems to be slightly experimental.

[nippur72]

Yes, context is the answer. Context is a well established practice despite being reported as experimental, so don't be afraid of using it. Also, if you are using Redux, in practice it's the only choice if you want your main store passed along all children effortlessly.

As regards my suggestion, it's for a completely different issue, so just ignore it.

[steezeburger]

Would making my entire store available cause the child components to re-render when anything in my global store changes?

Edit: ahh, it appears you define what you need in the getChildContext method. I think that's what I needed to see. Thanks for your help @nippur72!

[nippur72]

I don't know Redux in detail, but I think it's based on the idea to have one single big data tree (store) that triggers one single "changed" event that re-renders the whole UI (leaving React to decide what to refresh).

So yes, changing anything in the store would force re-rendering in the children. But there are ways to limit the change event only to a part of the data tree (by having more than one change event) and there are also ways in React to stop the rendering from propagating to certain children.

But my advice is to stick with the basic idea of "one store"/"one change event" because it's enough for most practical purposes, and it's beautifully simple.

[steezeburger]

Yup! It is beautifully simple. I have been loving React w/ flux architecture.