CODEWITHSUNDEEP
javascriptreactjscommerce
student101
student101

Reputation: 1

react.js and commerce.js problem, cart value totalItems isnt working as it should

Im having problem displaying the total amount of items in the cart. The cart itself loads without a problem and items are also added without a problem. But when I try to get the total amount of items in the cart totalItems = {cart.total_items} and pass it on to the navbar.jsx file to be displayed, I get many errors. The app.js file is as follows:

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 totalItems={cart.total_items}  />
       <Products products={products} onAddToCart={handleAddToCart} />
   </div>
 )
};

export default App;

The main errors I get are: "Uncaught Error: Objects are not valid as a React child (found: object with keys {totalItems}). If you meant to render a collection of children, use an array instead." and "The above error occurred in the component:". Im very new to react.js so any help would be appreciated.

Navbar.jsx code is as follows:

import React from 'react'; import { AppBar, Toolbar, IconButton, Badge, MenuItem, Menu, Typography } from '@material-ui/core'; import { ShoppingCart } from '@material-ui/icons';

import logo from '../../assets/mainlogo.png'; import useStyles from './styles';

const navbar = ({ totalItems }) => { const classes = useStyles;

return (
    <>
        <AppBar position="fixed" className={classes.appBar} color="inherit">
            <Toolbar>
                <Typography variant="h6" className={classes.title} color="inherit">
                    <img src={logo} alt="Commerce.js" height="25px" className={classes.image} />
                        Project
                </Typography>
                <div className={classes.grow} />
                <div className={classes.button}>
                    <IconButton aria-label="Show cart items" color="inherit">
                        <Badge overlap="rectangular" badgeContent={totalItems}  color="secondary">
                            <ShoppingCart/>
                        </Badge>
                    </IconButton>
                </div>
            </Toolbar>
        </AppBar>
   </>

) } export default navbar

Upvotes: 0

Views: 578

Answers (1)

Shy Attoun
Shy Attoun

Reputation: 21

i believe we are working on the same project from youtube ,i also encountered this problem.

u should try adding ? after the item then adding .cart

setMyCart(item?.cart)

or you can just ignore the .cart it will work just fine.

every-time you face this undefined error you should work around it with ? or ternary such as this example:

 if (!myCart.line_items) return 'Loading...'   return (
     <Container>
       <div className={classes.toolbar} />
       <Typography className={classes.title} variant="h3" gutterBottom>
         Your Shopping Cart
       </Typography>
       {!myCart.line_items.length ? <EmptyCart /> : <FilledCart />}
     </Container>   ) }

Upvotes: 0

Related Questions