How do you pass props down through ReactLayout and {this.props.content}?

[czbaker]

So, I'm rending stuff using ReactLayout (as a 'layout manager'), and what I'm having problems understanding is...how are you supposed pass props down from App -> Layout -> Page, if you can't (I don't see how) pass props down through {this.props.content}?

Say I have a function thisFunc() in App that I want to pass down to a grandchild component...how're you supposed to go about that? Ordinarily, I'd just do something like , but since you're using {this.props.content} to render components...I don't know how the chain is supposed to work.

Insights?

[benlwong]

I had the same question. I stumbled upon this answer given in the comment section: https://kadira.io/academy/meteor-routing-guide/content/rendering-react-components#comment-2340835669

Basically, you change the layout template code from:

MainLayout = React.createClass({
  render() {
    return <div>
      <header>
        This is our header
      </header>
      <main>
        {this.props.content}
      </main>
      <footer>
        This is our footer
      </footer>
    </div>
  }
});

to

MainLayout = React.createClass({
  render() {
    return <div>
      <header>
        This is our header
      </header>
      <main>
        {React.cloneElement(this.props.content, {someProp: this.thisFunc})}
      </main>
      <footer>
        This is our footer
      </footer>
    </div>
  }
});