Write a Simple Counter || undefined setState

JavaScript
1

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

2

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.

3

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

4

@DanCouper @codename11

Thanks for replying guys!!!

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

image
image673×825 18.9 KB

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.

5

Try ; after ) for setState.

6

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.

8

@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>
    );
  }
};
9

Typo:

should be this:

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

Thanks guys.!!

Next time will look for typos.

cheers