Reactjs/Redux – Objects are not valid as a React child

I am making a shopping cart – onClick I have redux adding items to cartItems array.

In the code below (increment reducer its the last one after add/remove) I am trying to get rid of duplicate values from the cartItems array, and display a total number of unique items in the cart with cartIcon: {value: 0} – which is by default 0 (before adding any items).

const initialState = {
    cartItems: [],
    cartQuantity: 0,
    cartIcon: {value: 0},
}


export const addToCartSlice = createSlice({
    name: 'cart',
    initialState,
    reducers: {
        
        add(state, action ) {

            const itemIndex = state.cartItems.findIndex(
                (props) => props.id === action.payload.id
                );
                if(itemIndex >= 0){
                    state.cartItems[itemIndex].cartQuantity += 1;
                } else {
                    const tempProduct = {...action.payload, cartQuantity: 1}
                    state.cartItems.push(tempProduct);

                }

            
        },
        remove(state, action) {
            const removeItem = state.cartItems.filter(
                (cartItem) => cartItem.id !== action.payload.id 
            
            );
            state.cartItems = removeItem;
        },


        increment: (state) => {
            const Items = state.cartItems.filter(
                (element, index) => state.cartItems.indexOf(element) === index);
                state.value = Items.length;
        }      // if i just do state.value += 1
               // then the value goes up by 1
               // but I want to display the amount of unique entries

    },

});

Here onClick I am pulling data from the item that was “added” to the cart and additionally trying to increment the cartIcon number by 1 (if the item hasn’t been yet added to the array cartItems). The problem could be here? Because the error mentions all the props and data I’m pulling to be rendered into the cart.

const dispatch = useDispatch()
const handleAddToCart = (props) => {
  dispatch(add(props));
};

  return (<>
                <div id={props.id} className='shopitem'>
                    <img src={props.url} />
                    <h2>{props.title}</h2>
                    <p className='boldprice'>${props.price}</p>
                    <button onClick={() => {
                    handleAddToCart(props);
                    dispatch(increment())
                  }}> ADD TO CART </button>
                </div>
        </>
  )
}

And here I am trying to display the amount of unique items to the shopping cart icon.

const count = useSelector((state) => state.cart.cartIcon.value)
{count}

For some reason I am getting this error. If I just do state.value += 1 it will add +1 to the shopping cart icon, however I only want to display +1 for each unique item.

“Uncaught Error: Objects are not valid as a React child (found: object with keys {id, title, price, url, cartQuantity}). If you meant to render a collection of children, use an array instead.”

Please help – I am relatively new to Javascript and programming overall.. I may be making a stupid mistake, so if something is clearly wrong.. then please let me know 🙂