state is not updating on click of a button

Question

I want to make a boolean true on the click of a button, but it shows "undefined" on console.log

export default class productdetail extends Component {
   constructor(props){
    super(props);
    this.state = {
        showCartMessage:false ,
    }
    this.handleCartListener = this.handleCartListener.bind(this);
   
   }
    handleCartListener(){
    this.setState({ showCartMessage: true });
    console.log(this.showCartMessage)
    }
    actionForProducts(product) {
      return(
         <div className="">
            <button className="add_cart btn  rounded-pill w-100  " onClick= 
                 {this.handleCartListener}>
            Add To Cart
           </button>
        </div>
      )
    }
    render(){
       return(
          <div className="p-3 h-100 ">
             {this.actionForProducts(this.props.productdetail)}
        </div>
       )
    }
}

How to resolve this? I tried so many times but it gives the same response.

Tushar Shahi · Accepted Answer · 2021-08-02 07:10:36Z

1

showCardMessage is a property of the state variable. Not the class instance.

 console.log(this.state.showCartMessage)

answered Aug 2, 2021 at 7:10

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amruth · Accepted Answer · 2021-08-02 07:11:54Z

0

The state has been updated properly. you have to just use this.state.showCartMessage, to see the changes.

you can use callback function to check the state after updating.

handleCartListener(){
 this.setState({ showCartMessage: true }, ()=>{console.log(this.state.showCartMessage) });
}

answered Aug 2, 2021 at 7:11

Amruth

5,9122 gold badges30 silver badges41 bronze badges

Comments

Viet · Accepted Answer · 2021-08-02 07:12:49Z

0

If you want to put console.log to check the new value of state. You should put it into render() because the state only has a new value when component re-render

render(){
  console.log(this.state.showCartMessage)
}

answered Aug 2, 2021 at 7:12

Viet

12.9k2 gold badges18 silver badges23 bronze badges

1 Comment

sheetal dadhich Over a year ago

it s work for me but in first click this give me false in console then give true

Salah ED · Accepted Answer · 2021-08-02 07:21:28Z

0

try to work with async await i had the same probleme the value is updated but the console.log show undefined until the next click it shows the previous state. Try this :

 async handleCartListener(){
    await this.setState({ showCartMessage: true });
    console.log(this.showCartMessage)
    }

answered Aug 2, 2021 at 7:21

Salah ED

6551 gold badge10 silver badges19 bronze badges

Comments

Seyed Kazem Mousavi · Accepted Answer · 2021-08-02 07:29:10Z

0

you should use callback setState

handleCartListener(){
    this.setState({ showCartMessage: true },()=>{
    console.log(this.state.showCartMessage)
});
    
}

answered Aug 2, 2021 at 7:29

Seyed Kazem Mousavi

4572 silver badges8 bronze badges

Collectives™ on Stack Overflow

state is not updating on click of a button

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related