title: Using PropTypes to call a method from the parent class
body: <p>I have a simple Parent->Child relationship and would like to call a method from the parent through the child component.</p>
  
  <p>My child component is a grid of buttons, where each button has a name. Looks like this.</p>
  
  <pre><code>class ButtonsGrid extends React.Component {
  
      clicked = (product) =&gt; {
          this.props.clicked(product);
      }
  
      render() {   
          return (
              &lt;div&gt;
                  &lt;GridList cellHeight={50} cols={10}&gt;
                      {this.props.list.length &gt; 0 ? this.props.list.map(product =&gt; {
                          return (
                              &lt;Button ref='productButton' style={{width: '200px', border: '1px solid'}} variant="raised" color="primary" onClick={() =&gt; this.props.clicked(product)}&gt;
                                  &lt;div 
                                      style={{fontSize:'12px', display: 'flex', justifyContent: 'center', textAlign:'center'}}&gt;
                                          {product.name}
                                  &lt;/div&gt;
                              &lt;/Button&gt;
                          );
                      }) : ''}
                  &lt;/GridList&gt;
              &lt;/div&gt;
          );
      } 
  }
  
  ButtonsGrid.propTypes = {
      clicked: PropTypes.func.isRequired,
  }
  
  export default ButtonsGrid;
  </code></pre>
  
  <p>The parent renders the <code>ButtonsGrid</code> component and should, per button push, log the button's name.</p>
  
  <pre><code>class App extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        list: [
          {"name":"test1"},
          {"name":"test2"},
        ]
      };
    }
  
    clicked = (product) =&gt; {
      console.log(product.name);
    }
    render() {
      return (
        &lt;div className="container-full padding-0"&gt;
          &lt;div className="row"&gt;
            &lt;div className="col-sm-3"&gt;
              &lt;ButtonsGrid list={this.state.list}/&gt;
            &lt;/div&gt;
            &lt;div className="col-sm-9" style={{paddingLeft:0, paddingRight:0}} clicked={(product) =&gt; this.clicked(product)}&gt;
              &lt;ButtonsGrid list = {this.state.list} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p><a href="https://imgur.com/a/3eGdO" rel="nofollow noreferrer">This</a> is the error I'm getting. Any ideas what I'm doing wrong?</p>