Buttons for counting, stateful component

JavaScript
1

The code seems correct. Nothing happens when the buttons are pressed. Only bind and set state areas were changed.


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

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36 Edg/89.0.774.50.

Challenge: Write a Simple Counter

Link to the challenge:

2

Two of your setState calls are not returning anything.

Edit: Remember, if you want an explicit return you have to remove the function brackets {}, if you have the brackets you have to do an implicit return.

3

Thank you. Arrow function syntax question of braces or no braces ensnared me. No braces with no “return.”

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

Right, that is using an implicit return.

Maybe check out the MDN article on arrow functions, they give some examples and break it down pretty well.

Some of it just comes down to getting some more experience with arrow functions.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.