React - Write a Simple Counter

Tell us what’s happening:
I don’t see any issue with my code but it doesn’t pass all the tests.

  **Your code so far**
class Counter extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    count: 0
  };
  // Change code below this line
  this.increment = this.increment.bind(this);
  this.decrement = this.decrement.bind(this);
  this.reset = this.reset.bind(this);
  // Change code above this line
}
// Change code below this line
  increment(){
    this.setState(state => ({
      count: state.count++
    }));
  }
  decrement(){
    this.setState(state => ({
      count: state.count--
    }));
  }
  reset(){
    this.setState({
      count: 0
    });
  }
// Change code above this line
render() {
  return (
    <div>
      <button className='inc' onClick={this.increment}>Increment!</button>
      <button className='dec' onClick={this.decrement}>Decrement!</button>
      <button className='reset' onClick={this.reset}>Reset</button>
      <h1>Current Count: {this.state.count}</h1>
    </div>
  );
}
};
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: React - Write a Simple Counter

Link to the challenge:

Increment and decrement operators mutate things. Don’t do that. Just calculate what the new value is.

1 Like

Is it always a bad practice to use increment and decrement operators?

No, only if you have something you don’t want to mutate. In react (or redux). Never mutate state. Every time you mutates state, a puppy dies.

1 Like