title: How to add action to functional component using Redux and ReactJS
body: <p>I try to add the action "addProduct" to the component. But I see an error when I click on it, help me cope, thanks in advance!</p>
  
  <p>I don't understand where is my mistake(</p>
  
  <pre><code>import { bindActionCreators } from "redux";
  import { addProduct } from "../actions/addProduct";
  
  const ProductListItem = ({ product }) =&gt; {
    return (
      &lt;div className="product"&gt;
        &lt;img className="product_img" src={product.image} /&gt;
        &lt;p&gt;{product.name}&lt;/p&gt;
        &lt;p className="bold"&gt;$ {product.price}&lt;/p&gt;
        &lt;button className="add_card" onClick={() =&gt; addProduct(product)}&gt;
          {" "}
          add to cart
        &lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  export default ({ products = [] }) =&gt;
    products.map((product, i) =&gt; {
      return &lt;ProductListItem key={i} product={product} /&gt;;
    });
  
  
  const mapDispatchToProps = dispatch =&gt; {
    return bindActionCreators({ addProduct }, dispatch);
  };
  
  connect(null,
    mapDispatchToProps
  )(ProductListItem);
  [enter image description here][1]
  </code></pre>