TypeError: onAddToCart

[TheFl00d]

This is video is awesome. I am experiencing a problem when adding items to the cart. This type Error appears on the web page TypeError: onAddToCart is not a function can anyone help with this?

Below I have included the App.js, Products.js and Product.js code

App.js:

import React, { useState, useEffect } from 'react'; import { commerce } from './lib/commerce'; import { Products, Navbar } from './components';

const App = () => { const [products, setProducts] = useState([]); const [cart, setCart] = useState({});

const fetchProducts = async () => {
    const { data } = await commerce.products.list();

    setProducts(data);
}

const fetchCart = async () => {

        setCart(await commerce.cart.retrieve())
    }

const handleAddToCart = async (productId, quantity) => {
    const item = await commerce.cart.add(productId, quantity);

    setCart(item.cart);
}

useEffect(() =>{
    fetchProducts();
    fetchCart();
}, []);

console.log(cart);

return (
    <div>
        <Navbar />
        <Products products={products} onAddtoCart={ handleAddToCart } />
    </div>
)

}

export default App

Products.js

import React from 'react';

import { Grid } from '@material-ui/core';

import Product from './Product/Product'; import useStyles from './styles';

const Products = ({ products, onAddToCart }) => { const classes = useStyles();

return (
    <main className={classes.content}>
        <div className={classes.toolbar} />
<Grid container justifyContent="center" spacing={4}>
    {products.map((product) => (
        <Grid item key={product.id} xs={12} sm={6} md={4} lg={3}>
                <Product product={product} onAddtoCart={onAddToCart} />
            </Grid>
    ))}
</Grid>

);

}

export default Products

Product.js

import React from 'react'; import { Card, CardMedia, CardContent, CardActions, Typography, IconButton } from '@material-ui/core'; import { AddShoppingCart } from '@material-ui/icons'; import useStyles from './styles';

const Product = ({ product, onAddToCart }) => { const classes = useStyles();

return (
    <Card className={classes.root}>
        <CardMedia className={classes.media} image={product.media.source} title={Product.name} />
        <CardContent>
            <div className={classes.CardContent}>
                <Typography variant="h5" gutterBottom>
                    {product.name}
                </Typography>
                <Typography variant="h5" >
                    {product.price.formatted_with_symbol}
                </Typography>
            </div>
            <Typography dangerouslySetInnerHTML={{ __html: product.description }} variant="body2" color="textSecondary" />

        </CardContent>
        <CardActions disableSpacing className={classes.cardActions}>
            <IconButton aria-label="Add to Cart" onClick={() => onAddToCart(product.id, 1)}>
                <AddShoppingCart />
            </IconButton>
        </CardActions>

    </Card>
)

}

export default Product

[rjmead23]

Look at each example of "onAddtoCart" in yout files.. products.js and app.js has "onAddtoCart", but I see that product.js has "onAddToCart" with the "To" using uppercase. Change that and I think it will work.