import React, { Component } from 'react'; export class OverlayCart extends Component { constructor(){ super(); this.state={ isCartActive:false, } } render() { // Function that will show the cart const handleCartActive = (e)=>{ e.preventDefault(); console.log("cart active"); this.setState({ isCartActive:!this.state.isCartActive }) } // Function whose purpose of life to get the totalitems in the cart const getTotalItem = () =>{ let totalItem = 0; this.props.cart.forEach(item => { totalItem += item.quantity; }); return totalItem; } return ( <NavbarItem > <NavbarItemIcon src="/assets/images/empty.png" alt="cart" onClick={(e)=>{handleCartActive(e)}}/> {getTotalItem() ===0 ? "": <CartCount><span>{getTotalItem()}</span></CartCount>} {this.state.isCartActive && <OverlayCartWrapperContainer toggleCart={handleCartActive}/> } </NavbarItem> ) } } const mapStateToProps = (state) =>{ return { cart:state.cart.cart.cartItems } } export default connect(mapStateToProps)(OverlayCart);

Quiero que isCartActive sea verdadero, entonces en <NavbarItemIcon src="/assets/images/empty.png" alt="cart" onClick={(e)=>{handleCartActive(e)}}/> el componente no tiene función en él si eso es falso, entonces onClick={(e)=>{handleCartActive(e)}} esta función debería estar allí. Estoy haciendo esto porque tengo una lista de eventos en otro componente cuando hago clic en este eventListener ejecuta la misma función y una vez más debido al onClick si puedo eliminar el onclick entonces el error se solucionará