maxcountryman maxcountryman - 1 year ago 87
React JSX Question

How do I pass state from a parent (wrapper component) to its children with react-router?

I have a parent component which loads some data from the backend in the

method. This comes from a single config endpoint which should only be called once. What I'd like to do load the data into his parent component and then wrap a number of child components with this state. To contextualize this the parent component is a navbar and a footer for a dashboard, the children would be views within this dashboard, i.e. the dashboard page content. React-Router's documentation explains that
is the preferred method for handling this but doesn't seem to explain how to pass state down to the children. How do I go about doing this?

Also it might be worth illustrating my routes:

<Router history={browserHistory}>
<Route path='/' onEnter={redirectWww} />
<Route path='/dashboard/' component={DashboardIndex}/>
<Route path='/dashboard/some/view' component={DashboardSomeView}/>

Answer Source

Actually just had to do something similar today. What I did was I used React.cloneElement to inject the parent components state into the child components. In your render method

{, (child) =>
  React.cloneElement(child, {...this.state})
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download