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.

Can you please copy/paste your actual code instead of a screen shot? I have a feeling it is something we can not see in your screenshot.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

Note: Backticks are not single quotes.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

@RandellDawson

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);

I had to study the code a bit, but I see you have a typo on the above line.

Never mind, I did not see @codename11’s reply before clicking Reply

Thanks guys.!!

Next time will look for typos.

cheers

It was giving your the correct message. It could not find a method named this.increment. If you see that message again, check for typos first. :smile: