Pass parent function to child when using this.props.children

Question

class Parent extends React.Component {
  foo() {
    console.log('i was called');
  }
  render() {
    return(
      this.props.childen;
    );
  }
}

class Child extends React.Component {
  render() {
    return(
      <div onClick="call foo here">Child</div>
    );
  }

}

React.render(<Parent><Child></Parent>, document.getElementById('View'));

Im trying to render out Child like its shown in the last line. In this scenario, how can I pass foo() from Parent to Child?

I know normally in Parent's render we do <Child func={this.foo} />

Take a look at this question - https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children — Himanshu Singh, Apr 16 '18 at 04:01

score 0 · Answer 1 · answered Apr 17 '18 at 05:32

You can call the Child inside the render method of Parent, and pass it the function foo as a prop. Then on the child component, you can retrieve it as props.

 class Parent extends React.Component {
      foo() {
        console.log('i was called');
      }
      render() {
        return(
          <Child foo={this.foo} />
        );
      }
    }

    class Child extends React.Component {

    render() {
        return(
          <div onClick={this.props.foo}>Child</div>
        );
      }

    }

    React.render(<Parent />, document.getElementById('View'));

Pass parent function to child when using this.props.children

1 Answers1