Write a Simple Counter -- Tests are off

Write a Simple Counter -- Tests are off
0.0 0

#1

Tell us what’s happening:

I’ve managed to get the reset function to work without it having passed the tests. Anyone else have this problem?

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);
    // change code above this line
  }
  // change code below this line
  increment(){
    this.setState({count: 1})
  }

  decrement(){
    this.setState({count: -1})
  }
 
  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_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/write-a-simple-counter/


#2

Not with the code you posted above. Your reset function shown above is not valid syntax for a class method. Also, you did not bind this to the reset method.

Also, your increment and decrement methods do not work. If I click the Increment button three times, I expect to see Current Count: 3. Your decrement method is not correct either.


#3

I refactored and still am getting errors. I used a global counter. Not the best way, but it works.

let count = 0 
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: count
    };
    // change code below this line
    this.reset = this.reset.bind(this);
 this.increment = this.increment.bind(this);
  this.decrement = this.decrement.bind(this);
    // change code above this line
  }
  // change code below this line
  increment(){
    this.setState({count: count++})
  }

  decrement(){
    this.setState({count: 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>
    );
  }
};

It still doesn’t pass the tests. Any idea why?


#4

You do not need global variables. The original code you post had the correct way of initalize the count in this.state.

For your increment and decrement methods, you just need to add or subtract one from this.state.count.