Passing a function down multiple children components in React using ES6
<p>I have a <code>LayoutComponent</code>, <code>PageComponent</code>, and <code>SingleComponent</code>. </p>

<p>When my user clicks a button, I want to display a message to the user on a <code>NewPageComponent</code> that my application routes to using Meteor's <code>FlowRouter</code>. </p>

<p>To do this, I am storing the message in <code>LayoutComponent</code>'s state, and then passing this message and a <code>handlerMethod</code> down as props to the <code>SingleComponent</code> via <code>PageComponent</code>, which is a stateless functional component. </p>

<p>I am not having any luck passing the <code>handlerMethod</code> down properly to the <code>SingleComponent</code> in order to set the message state on <code>LayoutComponent</code>. </p>

<p>I know this is a simple syntax issue, but could someone help me find my error?</p>

<p>LayoutComponent:</p>

<pre><code>export default class LayoutComponent extends Component {
  constructor() {
    super();

    this.state = {
      message: null
    };

    this.handlerMethod = this.handlerMethod.bind(this);
  }

  handlerMethod(message) {
    this.setState({ message: message });
  }

  render() {
    // the PageComponent is actually passed via FlowRouter in this.props.content, so it needs to be cloned to add props
    let contentWithProps = React.cloneElement(this.props.content, { message: this.state.message, handlerMethod: ((message) =&gt; this.handlerMethod) });
     return (
       &lt;div&gt;{contentWithProps}&lt;/div&gt;
     );
  }
}
</code></pre>

<p>PageComponent:</p>

<pre><code>const PageComponent = ({ message, handlerMethod }) =&gt; {
  return (
    &lt;div&gt;
      &lt;SingleComponent message={message} handlerMethod={(message) =&gt; handlerMethod} /&gt;
    &lt;/ div&gt;
  );
}
</code></pre>

<p>Component:</p>

<pre><code>export default class SingleComponent extends Component {
  constructor() {
    super();

    this.state = {
    };
    this.handleButtonClick = this.handleButtonClick.bind(this);
  }

  handleButtonClick(event) {
    event.preventDefault();
    // do some more stuff...
    this.props.handlerMethod("You pressed the button!");
    FlowRouter.go("newPage");
  }

  render() {
    &lt;div&gt;
      &lt;button onClick={this.handleButtonClick}&gt;button&lt;/button&gt;
    &lt;/div&gt;
  }
}
</code></pre>