I'm building an e-commerce application and for some reason my buttons to update the cart aren't working. I'm using props and when I go to the console log it says that onUpdateCartQty is not a function. I know props are a bit tricky.

Can someone point out what I did wrong?

CartItem.jsx

import React from 'react';
import { Typography, Button, Card, CardActions, CardContent, CardMedia } from '@material-ui/core';

import useStyles from './styles';

const CartItem = ({ item, onUpdateCartQty, onRemoveFromCart }) => {
const classes = useStyles();

return (
  //product.image.url?
<Card>
    <CardMedia image={item.image.url} alt={item.name} className={classes.media} />
    <CardContent className={classes.cardContent}>
        <Typography variant="h4">{item.name}</Typography>
        <Typography variant="h5">{item.line_total.formatted_with_symbol}</Typography>

    </CardContent>
    <CardActions className={classes.cardActions}>
        <div className={classes.buttons}>
                <Button type="button" size= "small" onClick={() =>  onUpdateCartQty(item.id, item.quantity - 1)}>-</Button>
                <Typography>{item.quantity}</Typography>
                <Button type="button" size= "small" onClick={() =>  onUpdateCartQty(item.id, item.quantity   1)}> </Button>
        </div>
        <Button variant="contained" type= "button" color="secondary" onClick={() => onRemoveFromCart(item.id) }>Remove</Button>

    </CardActions >
</Card>

)
}

export default CartItem

App.js

import React, { useState, useEffect } from "react";
import { commerce } from './lib/commerce';
import { Products, Navbar, Cart } from './components';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";




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 { cart } = await commerce.cart.add(productId, quantity);

  setCart(cart);
}

const handleUpdateCartQty = async (productId, quantity) => {
const { cart } = await commerce.cart.update(productId, { quantity});

setCart(cart);

}

const handleEmptyCart = async () => {
  const { cart } = await commerce.cart.empty();

  setCart(cart);
}

const handleRemoveFromCart = async (productId) => {
  const { cart } = await commerce.cart.remove(productId);

  setCart(cart);
}

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

console.log(cart);


 return (
 <Router>
 <div>
  <Navbar totalItems={cart.total_items} />
  <Routes>
    <Route path= "/" element={<Products products = {products} onAddToCart= 
    {handleAddToCart}/>}/>
    {/* <Products  products={products} onAddToCart={handleAddToCart} /> */}
    {/* </Route> */}

    <Route path= "/cart" element= {<Cart cart={cart}/>}
    handleUpdateCartQty ={handleUpdateCartQty}
    handleRemoveFromCart ={handleRemoveFromCart}
    handleEmptyCart ={handleEmptyCart}
    />
    {/* <Cart cart={cart} /> */}
    {/* </Route> */}
      
      
  </Routes>
</div>
</Router>
);
};

export default App;

enter image description here

CodePudding user response：

Currently, you are passing props to Route component not CartItem component.

 <Route path= "/cart" element= {<Cart cart={cart}/>}
handleUpdateCartQty ={handleUpdateCartQty}
handleRemoveFromCart ={handleRemoveFromCart}
handleEmptyCart ={handleEmptyCart}
/>

Try to send as

 <Route path= "/cart" element= {<Cart cart={cart}
handleUpdateCartQty ={handleUpdateCartQty}
handleRemoveFromCart ={handleRemoveFromCart}
handleEmptyCart ={handleEmptyCart}
/>} />

CodePudding user response：

Is this the entire solution? I can't see where CartItem has been used. I assume its being used in the Cart component?