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);

I want isCartActive is true then on <NavbarItemIcon src="/assets/images/empty.png" alt="cart" onClick={(e)=>{handleCartActive(e)}}/> component does not have function on it if that is false then onClick={(e)=>{handleCartActive(e)}} this function should be there i am doing this because i have an event lister in another component when i click on this that eventListener runs the same function and one more time run because of the onClick if i can remove the onclick then the bug will be fixed