title: React Pass function to child component
body: <p>I want to pass a function to a child component but I'm getting this error. </p>
  
  <p><code>Invalid value for prop passedFunction on &lt;div&gt; tag.</code></p>
  
  <pre><code>class Parent extends Component {
      passedFunction(){}
      render() {
        &lt;Child passedFunction={this.passedFunction}/&gt;
      }
  }
  
  class Child extends Component {
      render() {
          &lt;div onClick={this.props.passedFunction}&gt;&lt;/div&gt;
      }
  }
  </code></pre>
  
  <p>Basically what I'm trying to do.</p>
  
  <p>var ReactGridLayout = require('react-grid-layout');</p>
  
  <pre><code>var MyFirstGrid = React.createClass({
  passedFunction:function(){}
    render: function () {
      return (
        &lt;ReactGridLayout className="layout" cols={12} rowHeight={30} width={1200}&gt;
          &lt;div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}&gt;a&lt;/div&gt;
          &lt;div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}&gt;b&lt;/div&gt;
          &lt;div key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}} passedFunction={this.passedFunction}&gt;c&lt;/div&gt;
        &lt;/ReactGridLayout&gt;
      )
    }
  });
  </code></pre>
  
  <p>It seems it was introduced in React v16.  Therefore, what is the correct way to pass a function from parent to child?</p>