I want to increment/decrement counter based on button click. Scenario: There is an initial value on the button- say: 5 When a user clicks on the button, it increments to +1 - o/p: 6 however when the user clicks again on the button it, it'll reduce to 5 again. this case I dont have 2 buttons- inc and dec to increase/decrease the count.

code:

class Hello extends React.Component {
constructor() {
   super()
   this.state = {
     count: 10,

   }
 }
 getCount( c ) {

    const clicked = this.state.clicked
if(c == 1){
  this.setState({count: this.state.count +1, clicked: true});
} else {
  this.setState({count: this.state.count -1})
}

  }
  render() {
    return  <div>
                    <button onClick={this.getCount.bind(this, 1)}> click me for increase </button>
                    <button onClick={this.getCount.bind(this, 0)}> click me for decrease </button>
                    <div><h1>{this.state.count}</h1></div>

                     </div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('root')
);

I want to increment/decrement counter based on button click. Scenario: There is an initial value on the button- say: 5 When a user clicks on the button, it increments to +1 - o/p: 6 however when the user clicks again on the button it, it'll reduce to 5 again. this case I dont have 2 buttons- inc and dec to increase/decrease the count.

code:

class Hello extends React.Component {
constructor() {
   super()
   this.state = {
     count: 10,

   }
 }
 getCount( c ) {

    const clicked = this.state.clicked
if(c == 1){
  this.setState({count: this.state.count +1, clicked: true});
} else {
  this.setState({count: this.state.count -1})
}

  }
  render() {
    return  <div>
                    <button onClick={this.getCount.bind(this, 1)}> click me for increase </button>
                    <button onClick={this.getCount.bind(this, 0)}> click me for decrease </button>
                    <div><h1>{this.state.count}</h1></div>

                     </div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('root')
);

• javascript
• reactjs

• This seems like a strange requirement: The button will always be 5 or 6, won't it? – jalynn2 Commented May 7, 2019 at 18:21
• yes, its weird, but this is demo simple increment decrement of button click I believe – user1234 Commented May 7, 2019 at 18:30
• @user1234 any thoughts on my answer? I'd like to think of a way to improve it. – Cat_Enthusiast Commented May 7, 2019 at 18:31
• @ChristopherNgo, that works for me the way it should work.. – user1234 Commented May 7, 2019 at 18:33
• Sweeet! Let me know if you have any questions. :) – Cat_Enthusiast Commented May 7, 2019 at 18:34

3 Answers 3

You would need an additional state-value to keep track of the status of the button.

class Hello extends React.Component {
   constructor() {
      super()
      this.state = {
        count: 100,
        clicked: false
      }
    }
  getCount() {
    const clicked = this.state.clicked
    if(clicked){
      this.setState({count: this.state.count - 1, clicked: false});
    } else {
      this.setState({count: this.state.count + 1, clicked: true})
    }

  }
  render() {
    return  <div>
                    <button onClick={this.getCount.bind(this)}>Like | {this.state.count}</button>
                </div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

I have tried the below solution.

class App extends Component{
 constructor(){
   super()
   this.state={
     count:0,
   }
 }

 increment(){
   this.setState(
     {
       count:this.state.count+1
     }
   );
 };

 decrement(){
   this.setState(
     {
    count:this.state.count-1
     }
   );
 };

 reset(){
   this.setState(
     {
       count:0
     }
   )
 }

 render(){
    return(
        <div style={{
          position: 'absolute', left: '50%', top: '50%',
          transform: 'translate(-50%, -50%)'
      }}>
            <h1>Current Count :{this.state.count}</h1>
            <button className="inc"  onClick={(e)=>this.increment(e)}>Increment!</button>
            <button  className="dec" onClick={(e)=>this.decrement(e)}>Decrement!</button>
            <button className="reset" onClick={(e)=>this.reset(e)}>Reset!</button>

        </div>

    );
 }




}

export default App;

In addition to the increment and decrement the above code has a reset button to reset the count to 0.

class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            value: 0,
        }
    }
    addMore = () => {
        this.setState({
            value:this.state.value+1
        })
    }
    addLess = () => {
        this.setState({
            value:this.state.value > 0 ? this.state.value-1 : 0,
        })
    }
    render() {
        return(
<div className="">
       <div className="d-flex justify-content-center">
       <span className="bg-dark px-3 py-2 text-white br-50" onClick={this.addMore} 
        style={{cursor:'pointer'}}>+</span>
       <input type="text" max="0" min="0" className="mx-3 w-25 text-center" value= 
       {this.state.value}  />
       <span className="bg-dark px-3 py-2 text-white br-50"  onClick={this.addLess} 
       style={{cursor:'pointer'}}>-</span>
       </div>
</div>
        )
    }
}

export default Home;