I have encouneterd a problem that cannot find a solution in react-redux! I have a function that lives on Child component: "onClick={() => addToCart(product)}" Everytime I click on the button on UI of the application an error pops up saying: "TypeError: addToCart is not a function". I have tried several workarounds but in vain: Parent component code:

class Jeans extends Component {
  render () {
    return (
      <>
        <PanelHeader size="sm" />
        <ProductList 
          addToCart = {this.addToCart}
          products={jeans}
          image={jeans1}
          header='Jeans For Men'
          description='Foundation Of Contemporary Wardrobes, 
          Whether Tailored Or Super Skinny, Straight or Slim, 
          Biker or Destroyed, Our Denim Collection Caters To 
          Every Style And Silhouette.'
        />
      </>
      );
    }
  }


const mapStateToProps = (state)=> {
  return {
      products: state.products
       }
  }

const mapDispatchToProps = (dispatch) => {
      return {
        addToCart: (id) => {dispatch(addToCart(id))}
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Jeans);```
and Child component where the function lives:


```class ProductCard extends Component {
  render() {
    const {image, product, key, addToCart} = this.props
    return (
      <Col
        lg={4}
        md={6}
        sm={6}
        xs={12}
        className="font-icon-list"
        key={key}
      ><Card>
        <CardImg img src={image} alt="product"/>
          <CardBody>
            <CardTitle className='d-inline align-middle text-danger'>{product.title}</CardTitle>
            <CardTitle className='d-inline align-middle float-right h5'><strong>{product.price}</strong></CardTitle>
            <CardText className='my-2'>{product.description}</CardText>
            <Button>
              <div className="col-md-12 text-center">
                <div className="buttons d-flex flex-row">
                  <div className="cart"><i className="fa fa-shopping-cart"></i>
                    </div> 
                  <button onClick={() => addToCart(product)} className="btn btn-success cart-button px-5">Add to Cart</button>
                </div>
              </div>
            </Button>
          </CardBody>
        </Card>
      </Col>
    )
  }
}

export default ProductCard```

**Thank you in advance for your time reviewing my question!**

There is an intermediate component between Parent (Jeans) and Child (Productcard) called (Productlist) so the order goes: "Jeans" --> "ProductList" --> "ProductCard".