With this code I get this error "onAddToCart is not a function" How can I fix it?

Question

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




const Product =  ({ product, onAddToCart }) =>{

    const classes = useStyles(); 

    return(
        <Card className={classes.root}>
            <CardMedia className={classes.media} image={product.image.url} 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 card"  onClick={() => onAddToCart(product.id, 1)}>
                    <AddShoppingCart />
                </IconButton>

            </CardActions>

        </Card>
    )

}

export default Product;

Answer 1

You need to look at how the prop onAddToCart is transferred to the component Product

Search something like: <Product ... />