Write a Simple Counter || undefined setState

Tell us what’s happening:
after running the test , it tell that setState is undefined for increment and reset function.
Can any body tell what is the problem.

Your code so far


class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    // change code below this line
    this.incremnet = 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((prevState) => {
    return {count: prevState.count + 1}
  });
    }
    decrement(){
        this.setState((prevState) => {return {count : prevState.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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

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

They should look the same as the reset function, except you add/subtract one to/from the current state (this.state). You don’t pass a function in, the first argument to the function (and the only one you need here) is an object that gets merged with the current state.

What is prevState? Try instead with-> this.state.count + or - or =0

@DanCouper @codename11

Thanks for replying guys!!!

I tried what you have told but still have error (see image attached)

I passed a function instead of an object to ensure the call always uses the most updated version of state.

I refereed this article
https://reactjs.org/docs/faq-state.html#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate.

Please let me know what went wrong.

Try ; after ) for setState.

NO … still the facing the same error.

When I clicked on increment button the browser console say the setState is undefined.

Unable to understand what does that mean.!! By using this keyword the setState is binding correctly. I don’t understand why it is undefined.

@camperextraordinaire

setState is undefined for increment and reset function,

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    // change code below this line
    this.incremnet = 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({
            count : this.state.count +1 
        })
    }
    decrement(){
        this.setState({
            count: this.state.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>
    );
  }
};

Typo:

should be this:

this.increment= this.increment.bind(this);

Thanks guys.!!

Next time will look for typos.

cheers