React router and this.props.children - how to pass state to this.props.children

Question

I'm using React-router for the first time and I don't know how to think in it yet. Here's how i'm loading my components in nested routes.

entry point .js

ReactDOM.render(     <Router history={hashHistory} >         <Route path="/" component={App}>             <Route path="models" component={Content}>         </Route>     </Router>,      document.getElementById('app') ); 

App.js

  render: function() {     return (       <div>         <Header />         {this.props.children}       </div>     );   } 

So the child of my App is the Content component I sent in. I'm using Flux and my App.js has the state and listens for changes, but I don't know how to pass that state down to this.props.children. Before using react-router my App.js defines all children explicitly, so passing state was natural but I don't see how to do it now.

Answer 1

This question boils down to, how do you pass props to children?

June 2018 answer

Today's tech:

• React 16+
• React Router 4: react-router-dom
• Render Props from official docs

---

Assuming some stateful component:

import React from 'react' import { BrowserRouter, Route } from 'react-router-dom'  // some component you made import Title from './Title'  class App extends React.Component {   // this.state   state = { title: 'foo' }    // this.render   render() {     return (       <BrowserRouter>          // when the url is `/test` run this Route's render function:         <Route path="/:foobar" render={            // argument is props passed from `<Route /`>           routeProps =>               // render Title component             <Title                // pass this.state values               title={this.state.title}                // pass routeProps values (url stuff)               page={routeProps.match.params.foobar} // "test"             />          } />        </BrowserRouter>     )   } } 

This works because this.props.children is a function:

// "smart" component aka "container" class App extends React.Component {   state = { foo: 'bar' }   render() {     return this.props.children(this.state.foo)   } }  // "dumb" component aka "presentational" const Title = () => (   <App>     {title => <h1>{title}</h1>}   </App> ) 

Example on codesandbox

My previous oldschool answer that I wouldn't recommend anymore:

Using a couple of React helper methods you can add state, props and whatever else to this.props.children

render: function() {   var children = React.Children.map(this.props.children, function (child) {     return React.cloneElement(child, {       foo: this.state.foo     })   })    return <div>{children}</div> } 

Then your child component can access this via props, this.props.foo.