this.setState isn't making changes in state

Question

I am using functions that change a value in a nested object in the state :

an I am calling those functions in a button , they are executed when I click on that button , but one of those functions doesn't make changes to the state

This is the state :

    state = {
        data: {
            attributesLength: this.props.product.attributes.length,
            modalMessage: "",
            isOpen: false,
        },
    };

and these are the functions :

addToCart = (id) => {
        let data = { ...this.state.data };
        if (Object.keys(this.state).length === 1) {
            data.modalMessage = "Please, select product attributes";
            this.setState({ data});
            return;
        }
        if (
            Object.keys(this.state).length - 1 ===
            this.state.data.attributesLength
        ) {
            const attributes = Object.entries(this.state).filter(
                ([key, value]) => key !== "data"
            );
            if (this.props.cartProducts.length === 0) {
                this.props.addItem({
                    id: id,
                    quantity: 1,
                    attributes: Object.fromEntries(attributes),
                });
                data.modalMessage = "Added to cart !";
                this.setState({ data });
                return;
            }
            const product = this.props.cartProducts.filter((item) => item.id === id);
            if (product.length === 0) {
                this.props.addItem({
                    id: id,
                    quantity: 1,
                    attributes: Object.fromEntries(attributes),
                });
                data.modalMessage = "Added to cart !";
                this.setState({ data });
                return;
            }
            if (product.length !== 0) {
                this.props.changeQuantity({ id: id, case: "increase" });
                data.modalMessage = "Quantity increased !";
                this.setState({ data });
                return;
            }
            if (this.state.data.attributesLength === 0) {
                this.props.addItem({
                    id: id,
                    quantity: 1,
                    attributes: Object.fromEntries(attributes),
                });
                data.modalMessage = "Added to cart !";
                this.setState({ data });
                return;
            }
        } else {
            data.modalMessage = 'please, select "ALL" product attributes!';
            this.setState({ data });
        }
};


    changeModalBoolean = () => {
        let data = { ...this.state.data };
        data.isOpen = !data.isOpen;
        this.setState({ data });
    };

and this is where I am calling functions :

                        <button
                            className={product.inStock ? null : "disabled"}
                            disabled={product.inStock ? false : true}
                            onClick={() => {
                                this.addToCart(product.id);
                                this.changeModalBoolean();
                            }}
                        >
                            {product.inStock ? "add to cart" : "out of stock"}
                        </button>

NOTE changeModalBoolean function works and change state isOpen value,

Answer 1

   this.addToCart(product.id);
   this.changeModalBoolean();

This code run synchronously one after the other. In every function, you create a copy of previous state let data = { ...this.state.data };

so the this.changeModalBoolean(); just replace state which you set in this.addToCart(product.id); to fix this problem, use this.setState((state) => /*modify state*/)

  changeModalBoolean = () => {
    this.setState((state) => {
        let data = { ...state.data };
        data.isOpen = !data.isOpen;
        return { data };
    })
};

or modify the same object in both functions