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

Question

I am trying to update the number on the badge in cart icon in my site and passing the totalItemls={cart.total_items} as a props to navbar but it't throwing me an error that objects are not valid as react chiled. I am using commerce.js api and material UI.

i have also console logged the total_items and it outputs a number i just want to pass that number in the badge in the navbar

App.js

// import React from 'react';
// import Products from './components/Products/Products';


 import { commerce} from './lib/commerce';

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


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)
   
    // console.log(products);
    return (
        <div>
            <Navbar totalItems={cart.total_items}/>
            <Products products={products} onAddtoCart={handleAddToCart}/>
        </div>
    );
}

export default App;

Navbar.js

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

import logo from '../../assets/logo.jpg'
import useStyles from './styles'

const Navbar=(totalItems) =>{

    const classes=useStyles();
    return (
        <div>
            <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}/>
                        E-Commerce
                    </Typography>
                    <div className={classes.grow}/>
                    <div className={classes.button}>
                        <IconButton aria-label="Show Cart items" color="inherit">
                            <Badge badgeContent={totalItems} color="secondary">
                                <ShoppingCart/>
                            </Badge>

                        </IconButton>

                    </div>
                </Toolbar>

            </AppBar>
        </div>
    );
}

export default Navbar;

Try to change (totalItems) to ({totalItems}) in Navbar first line. The first argument is an object with all props passed to component. So totalItems is an object like {totalItems: 1} for example. — Mauricio Piber Fão, Jan 06 '22 at 02:07

score 1 · Accepted Answer · answered Jan 06 '22 at 02:08

1

The prop passed to a react component needs to be an object like this:

const Navbar=({totalItems}) =>{

answered Jan 06 '22 at 02:08

Hanchen Jiang

2,514
2
9
20

score 1 · Answer 2 · answered Jan 06 '22 at 02:14

1

Just add curly braces around the totalItems property at Navbar component as previous response suggests.

answered Jan 06 '22 at 02:14

Bezpalko Oleh

97
2

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

2 Answers2