React - Write a Simple Counter

JavaScript
#1

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:

#2

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

1 Like
#3

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

#4

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