reactjs - React Pass function to child component

Question

I want to pass a function to a child component but I'm getting this error.

Invalid value for prop passedFunction on <div> tag.

class Parent extends Component {
    passedFunction(){}
    render() {
      <Child passedFunction={this.passedFunction}/>
    }
}

class Child extends Component {
    render() {
        <div onClick={this.props.passedFunction}></div>
    }
}

Basically what I'm trying to do.

var ReactGridLayout = require('react-grid-layout');

var MyFirstGrid = React.createClass({
passedFunction:function(){}
  render: function () {
    return (
      <ReactGridLayout className="layout" cols={12} rowHeight={30} width={1200}>
        <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>a</div>
        <div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>b</div>
        <div key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}} passedFunction={this.passedFunction}>c</div>
      </ReactGridLayout>
    )
  }
});

It seems it was introduced in React v16. Therefore, what is the correct way to pass a function from parent to child?

Answer 1

Instead of having to bind your function in the constructor of the parent Class, you can use an arrow function to define your method so it is lexically bound using an arrow function

class Child extends Component {
    render() {
        <div onClick={this.props.passedFunction}></div>
    }
}

class Parent extends Component {
    passedFunction = () => {}
    render() {
      <Child passedFunction={this.passedFunction}/>
    }
}

To Account for older version support of Javascript:

class Child extends Component {
    render() {
        <div onClick={this.props.passedFunction}></div>
    }
}

class Parent extends Component {
    constructor() {
        this.passedFunction = this.passedFunction.bind(this)
    }

    passedFunction() {}
    render() {
      <Child passedFunction={this.passedFunction}/>
    }
}