I am not sure what is wri=ong with this/write a simple counter

JavaScript
1

Tell us what’s happening:

Your code so far


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

Challenge: Write a Simple Counter

Link to the challenge:

please help, I am not sure what is wrong. Thank you!

2

Hi, you didn’t say very much about Tell us what’s happening:

What tests are failing? What errors are you seeing?

3

I would tell you my test errors but I don’t know them. I can’t even run the test because

``SyntaxError: unknown: Unexpected token, expected “;” (8:12)

6 | };
7 | // change code below this line

8 | increment() {
| ^
9 | this.setState(state => ({
10 | count: state.count + 1
11 | }));``

4

That means you probably have a missing } or ) somewhere in your code.

5

hmmmm. I’ll check it out.

6

naww, I don’t think so. Everything has a pair.

7

Actually, I think you might have too many }

1 Like
8

  1. Your methods are inside the constructor.

  2. You didn’t bind the methods this.

  3. You are missing the reset method.

2 Likes
9

I am going to start over,

10

I figured it out. Duh! I missed a very important and vital part!

11

Tell us what’s happening:

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(this);
this.decrement = this.decrement(this);
this.reset = this.reset.bind(this);
  // change code above this line
}
reset() {
  this.setState({
    count:0
  });
}
increment() {
  this.setState(state => ({
    count: state.count + 1
  }));
}
decrement() {
  this.setState(state => ({
    count: state.count - 1
  }));
}
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; rv:76.0) Gecko/20100101 Firefox/76.0.

Challenge: Write a Simple Counter

Link to the challenge:

Okay, what is wrong now? I thought for sure it would be right!

Clicking the increment button should increment the count by `1` .

Clicking the decrement button should decrement the count by `1` .

12

You are missing bind

1 Like
13

Tada! Beautiful! It worked!

14

Soooo satisfying when it works!

1 Like