Change boolean value with handleClick in React.js [duplicate]

Question

I'm working on a small component which is essentially a button that allows a user to click to see a small shopping cart overlay.

If "showCart" is false (AKA the button is not clicked), the cart should be invisible. If the button is clicked, "showCart" should become true and thus render the component.

I try clicking on the button and while I do get my console.log message "Button clicked", my Cart overlay doesn't appear. Can anyone give me some insight as to why this isn't working?

class ViewCart extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showCart: false }
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState ={ showCart: true} 
    console.log("button clicked")

  }
  render() { 
    return (
      <div> 
      <button onClick={this.handleClick}> Show Cart 
        {this.state.showCart ? <Cart />: null }
        </button>

        </div>
        );
  }
}

Nishant Dixit · Accepted Answer · 2018-04-05 17:40:34Z

2

You are not changing state in right manner, Code for change state will be like this this.setState({ showCart: true}) Replace handleClick function from below code.

 handleClick() {
    this.setState({ showCart: true}) 
    console.log("button clicked")
  }

answered Apr 5, 2018 at 17:40

Nishant Dixit

5,5125 gold badges22 silver badges32 bronze badges

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

Comments

Tomasz Mularczyk · Accepted Answer · 2018-04-05 17:40:42Z

0

You update your state the wrong way :)

handleClick() {
  this.setState({ showCart: true})
  console.log("button clicked")
}

answered Apr 5, 2018 at 17:40

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

Collectives™ on Stack Overflow

Change boolean value with handleClick in React.js [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related