TypeError: setCartCount is not a function - React Hooks - Redux

user_13473626 0
Viewed 103

I am in the process of setting up and implementing redux in my ecommerce project, and currently I am trying to get it set up so the UI updates the BasketBadge I created to display number of items in the cart when an item is added to the cart.

I am using redux and react hooks to achieve this, however for some reason I am thrown an error I have not actually had before when using hooks: "TypeError: setCartCount is not a function".

I had a similar error for when I was implementing my addToCart functionality however the workaround for that issue does not work for this one.

code is below>

import React, {useState, useEffect} from 'react';

import 'antd/dist/antd.css';

import { Avatar, Badge } from 'antd';
import { ShoppingCartOutlined, UserOutlined } from '@ant-design/icons';
import { connect } from 'react-redux';

const BasketBadge = ({cart}) => {
    
    const {cartCount, setCartCount} = useState(0);

    useEffect(() => {

        
        let count = 0;
        //loop through cart array
        // counts all of qty of each item added to populate count

        cart.forEach((item) => {
            count += item.qty;
        });
        //once loop is done we set cartCount to new value of count
        setCartCount(count);

    },[cart, cartCount]);

    return(
        <div>
            <span className="avatar-item">
                <Badge count={cartCount}>
                    <Avatar shape="circle" icon={<ShoppingCartOutlined />} />
                </Badge>
            </span>
        </div>
    )
}

const mapStateToProps = (state) => {
    return{
        cart: state.shop.cart,
    }
}

export default connect(mapStateToProps)(BasketBadge);
react-redux redux react-hooks reactjs javascript
1 Answers

Instead of:

const {cartCount, setCartCount} = useState(0);

You should have:

const [cartCount, setCartCount] = useState(0);

The array destructuring syntax should be used. It lets us give different names to the state variables we declared by calling useState. These names aren’t a part of the useState API.

user_20428270
Related