Write a Simple Counter || undefined setState

Write a Simple Counter || undefined setState
0

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

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.


#7

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.


#8

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

#9

Typo:

should be this:

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

#10

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


#11

Thanks guys.!!

Next time will look for typos.

cheers


#12

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: