title: onClick event in React parent component is not working
body: <p>I have created a react parent component that passes some props down to it's child component, and holds an onClick function. The onClick function should console.log 'WORKED' when a Product component is clicked, this isn't working and nothings appearing on the console. I don't understand where I went wrong, this should be so simple. Have I made a stupid mistake I keep missing?</p>
  
  <p>here is my parent component code: </p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import Product from '../components/product.js';
  import { bindActionCreators } from 'redux';
  import { changeTotal } from '../actions/index.js';
  import { selectProduct } from '../actions/index.js';
  
  class ProductList extends React.Component {
      constructor(props) {
          super(props);
  
          this.state={
              total: 0
          }
  
          this.addFromTotal = this.addFromTotal.bind(this);
          this.subtractFromTotal = this.subtractFromTotal.bind(this);
          this.handleClick = this.handleClick.bind(this);
      }
  
      handleClick() {
          console.log('done')
      }
  
      addFromTotal(product) {
          var x = Number(product.price)
          this.setState({total: this.state.total + x}, () =&gt; {
              console.log('total is ' + this.state.total);
              var total = this.state.total;
              this.props.changeTotal(total);
          });
      }
  
      subtractFromTotal(product) {
          var x = Number(product.price)
          this.setState({total: this.state.total - x}, () =&gt; {
              console.log('total is ' + this.state.total);
              var total = this.state.total;
              this.props.changeTotal(total);
          });
      }
  
      render() {
          var createProductList = this.props.products.map((product, i) =&gt; {
              return &lt;Product
                      key={i} 
                      title={product.title} 
                      price={product.price} 
                      definition={product.definition}
                      source={product.source}
                      addFromTotal={() =&gt; this.addFromTotal(product)}
                      subtractFromTotal={() =&gt; this.subtractFromTotal(product)}
                      // onClick={() =&gt; this.props.selectProduct(product)}
                      onClick={this.handleClick}
                      /&gt;
          });
          return (
              &lt;div&gt;
                  &lt;div&gt;Product List&lt;/div&gt;
                  &lt;div style={{display: 'flex', flexDirection: 'row'}}&gt;{createProductList}&lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps(state) {
      return {
          products : state.products
      }
  }
  
  function mapDispatchToProps(dispatch) {
      return bindActionCreators({ changeTotal: changeTotal }, dispatch);
  }
  
  
  export default connect(mapStateToProps, mapDispatchToProps)(ProductList);
  </code></pre>
  
  <p>here is the code for the Product (child) component: </p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import { updateItemObject } from '../actions/index.js'
  
  class Product extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              counter: 0,
              itemTotal: 0
          }
  
          this.handleAdd = this.handleAdd.bind(this);
          this.handleSubtract = this.handleSubtract.bind(this);
      }
  
      handleAdd(product) {
          var x = Number(this.props.price)
          this.setState({
              itemTotal: this.state.itemTotal + x,
              counter: this.state.counter + 1
          }, () =&gt; {
              console.log('item total ' + this.state.itemTotal);
              console.log('item count ' + this.state.counter);
              this.props.addFromTotal(product);
          });
      }
  
      handleSubtract(product) {
          if(this.state.counter === 0) {
              return;
          }
  
          var x = Number(this.props.price)
          this.setState({
              itemTotal: this.state.itemTotal - x,
              counter: this.state.counter - 1
          }, () =&gt; {
              console.log('item total ' + this.state.itemTotal);
              console.log('item count ' + this.state.counter);
              this.props.subtractFromTotal(product);
          });
      }
  
      render() {
          return (
              &lt;div style={{margin: '20px', backgroundColor: '#F5F5F5', cursor: 'pointer'}}&gt;
                 &lt;div&gt;product name: {this.props.title}&lt;/div&gt;
                 &lt;div&gt;product price: {this.props.price}&lt;/div&gt;
                 &lt;div&gt;product definition: {this.props.definition}&lt;/div&gt;
                 &lt;div style={{
                     backgroundImage: this.props.source,
                     backgroundSize: 'cover',
                     padding: '15px',
                     margin: '15px',
                     height: '200px',
                     width: '250px' 
                 }}&gt;
                 &lt;/div&gt;
                 &lt;div&gt;
                     &lt;span style={{cursor: 'pointer'}} onClick={this.handleAdd}&gt;+ &lt;/span&gt;
                     &lt;span style={{cursor: 'pointer'}} onClick={this.handleSubtract}&gt;-&lt;/span&gt;
                 &lt;/div&gt;
                 &lt;div&gt;
                     &lt;div&gt;x{this.state.counter} {this.props.title} for a sum of {this.state.itemTotal}&lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  function mapDispatchToProps(dispatch) {
     return bindActionCreators({ updateItemObject: updateItemObject }, dispatch);
  }
  
  export default connect(null, mapDispatchToProps)(Product);
  </code></pre>