The react state is not changing when I am trying to change it

Question

I have a state isCartACtive when I am trying to close it running

// Function that will show the cart
  handleCartActive(){
    console.log("cart active",this.state.isCartActive);
    this.setState(prevState =>({
      isCartActive:!prevState.isCartActive
    }))
  }

the code dont give any error neither it is changing state

OverlayCart.jsx

import React, { Component } from 'react';
import { OverlayCartContainer,OverlayCartHeader,TotalContainer,
  ActionSection,ViewBagButton,CheckoutButton,CartCount,NavbarItem,OverlayContainerWrapper,
  NavbarItemIcon } from './OverlayCartStyle';
import { Link } from 'react-router-dom'
import { connect } from 'react-redux';
import { OverlayCartbody } from '../../';


export class OverlayCart extends Component {

  constructor(){
    super();
    this.state={
      isCartActive:false,
      ref: React.createRef(null),
    }
  }

  handleHideDropdown = (event) => {
    if (event.key === 'Escape') {
      this.setState({ isCartActive: false });
    }
  }

  handleClickOutside = (event) => {
    if (this.state.ref.current && !this.state.ref.current.contains(event.target)) {
      this.setState({ isCartActive: false });
    }
  }

  componentDidMount() {
    document.addEventListener('keydown', this.handleHideDropdown, true);
    document.addEventListener('click', this.handleClickOutside, true);
  }

  componentWillUnmount(){
    document.removeEventListener('keydown', this.handleHideDropdown, true);
    document.removeEventListener('click', this.handleClickOutside, true);
  }

  // Function that will show the cart
  handleCartActive(){
    console.log("cart active",this.state.isCartActive);
    this.setState(prevState =>({
      isCartActive:!prevState.isCartActive
    }))
  }

  render() {
    // 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;
    }

    const getTotalPrice = (curren)  =>{
      let totalPrice = 0;
      this.props.cart.forEach(item => {
        let price =item.product.prices.find(
                  (e) => e.currency.label === curren
                ).amount
        totalPrice = totalPrice + item.quantity*price
        // totalPrice += item.price;
      });
      return parseFloat(totalPrice).toFixed(2);
    }
    return (
      <NavbarItem onClick={()=>{this.handleCartActive()}}>
        <NavbarItemIcon src="/assets/images/empty.png" alt="cart" />
                  {getTotalItem() ===0 ? "": <CartCount><span>{getTotalItem()}</span></CartCount>}
                  {this.state.isCartActive && <OverlayContainerWrapper ref={this.state.ref}> <OverlayCartContainer >
        <OverlayCartHeader>
                My Bag,   <span>{getTotalItem()} items</span>
        </OverlayCartHeader>
              <OverlayCartbody cartItem ={this.props.cart}/>
            <TotalContainer>
              <p>Total</p>
              <h6>{this.props.currencySymbol} {getTotalPrice(this.props.currencyState)}</h6>
            </TotalContainer>
            <ActionSection>
              <Link to={"/cart"}><ViewBagButton>VIEW BAG</ViewBagButton></Link>
              <CheckoutButton>CHECKOUT</CheckoutButton>
            </ActionSection>

        </OverlayCartContainer></OverlayContainerWrapper> }
      

      
      </NavbarItem>

    )
  }
}


const  mapStateToProps = (state) =>{
  return {
      currencyState:state.currency.currencyState,
      currencySymbol:state.currency.currencySymbol,
      cart:state.cart.cart.cartItems
  }
}
export default connect(mapStateToProps)(OverlayCart);

i just did consolelog and yes it is fired still how i fix the bug — sarangkkl, Jul 15 '22 at 07:41
Did you check if handleClickOutside triggers on each click? I think when your ref is in OverlayContainerWrapper and you click the button, that is not inside it, you always trigger handleClickOutside as well. Try to console.log this.state.isCartActive in your render method, to check if it changes from true to false — Oktay Yuzcan, Jul 15 '22 at 08:21
@OktayYuzcan yes you are right `handleClickOutside is triggered as well but still how cani resolve this issue` — sarangkkl, Jul 15 '22 at 08:32

score 0 · Accepted Answer · answered Jul 15 '22 at 09:11

It works. It opens. It sets to true. But when you try to close you click outside + the icon. So 2 events occur. You are closing it with handleClickOutside and then opening it again with handleCartActive. The right solution would be to use backdrop. When the dialog is open, show the backdrop and add event listener to it: when clicked outside the dialog, close it. And after closing it remove the event listener.

The quickest solution for you will be

<NavbarItem onClick={this.state.isCartActive ? undefined : ()=>{this.handleCartActive()}}>

The react state is not changing when I am trying to change it

1 Answers1