Passing a function down multiple children components in React using ES6

Question

I have a LayoutComponent, PageComponent, and SingleComponent.

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

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

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

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

LayoutComponent:

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) => this.handlerMethod) });
     return (
       <div>{contentWithProps}</div>
     );
  }
}

PageComponent:

const PageComponent = ({ message, handlerMethod }) => {
  return (
    <div>
      <SingleComponent message={message} handlerMethod={(message) => handlerMethod} />
    </ div>
  );
}

Component:

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() {
    <div>
      <button onClick={this.handleButtonClick}>button</button>
    </div>
  }
}

Answer 1

You aren't actually calling your handlerMethod in the code you posted. So this:

handlerMethod: ((message) => this.handlerMethod)

Should be either:

handlerMethod: ((message) => this.handlerMethod(message))

Or more simply:

handlerMethod: this.handlerMethod

Answer 2

Your mistake is that you're passing a function that will return this.handlerMethod instead of call it:

handlerMethod: ((message) => this.handlerMethod) // this returns the handlerMethod function, doesn't call it

Should be

handlerMethod: ((message) => this.handlerMethod(message))

You can also pass it directly:

handlerMethod: this.handlerMethod

The reason passing it directly works is because you're binding the context of handlerMethod inside the constructor for LayoutComponent, meaning this inside handlerMethod will be fixed to LayoutComponent (see Note bellow)

Here's a short example:

Layout Component

export default class LayoutComponent extends Component {
  constructor() {
    // ...
    this.handlerMethod = this.handlerMethod.bind(this); // handler is bound
  }

  handlerMethod(message) {
    // ...
  }

  render() {
    let contentWithProps = React.cloneElement(
      this.props.content, { 
        message: this.state.message, 
        handlerMethod: this.handlerMethod // pass the handler directly
      }
    );

    return <div>{contentWithProps}</div>;
  }
}

Page Component

// pass the handlerMethod directly
const PageComponent = ({ message, handlerMethod }) => {
  return (
    <div>
      <SingleComponent message={message} handlerMethod={handlerMethod} />
    </ div>
  );
}

Single Component

export default class SingleComponent extends Component {

  // ...

  handleButtonClick(event) {
    // ...
    this.props.handlerMethod("You pressed the button!"); // call the passed method here
    // ...
  }

  // ...
}

Note: Technically, you could override bound this by calling new this.handlerMethod but this isn't happening so you're fine.

Answer 3

If you simply want to pass the method down, you do it like this:

const PageComponent = ({ message, handlerMethod }) => {
  return (
    <div>
      <SingleComponent message={message} handlerMethod={handlerMethod} />
    </ div>
  );
}