Increment / Decrement function in ReactJS

Question

I created a increment/decrement function, but I have a doubt.

I can decrement count clicking in same button that include a increment count? How to create that function?

Code:

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clicks: 0,
      show: true
    };
  }

  IncrementItem = () => {
    this.setState({ clicks: this.state.clicks + 1 });
  }
  DecreaseItem = () => {
    this.setState({ clicks: this.state.clicks - 1 });
  }
  ToggleClick = () => {
    this.setState({ show: !this.state.show });
  }

  render() {
    return (
      <div>
        <button onClick={this.IncrementItem}>Click to increment by 1</button>
        <button onClick={this.DecreaseItem}>Click to decrease by 1</button>
        <button onClick={this.ToggleClick}>
          { this.state.show ? 'Hide number' : 'Show number' }
        </button>
        { this.state.show ? <h2>{ this.state.clicks }</h2> : '' }
      </div>
    );
  }
}

export default App;

Hi, can you more clearly explain what it is you are trying to do, or what you want to do, or what might not be working as expected? It's very unclear what you are asking. — Drew Reese
– Drew Reese, Commented May 3, 2020 at 20:49
yeah, ok. For example: a like button on instagram. as soon as i click on the button it adds a like and when i click on that same like button this like is removed. — Joao Paulo Gardiano
– Joao Paulo Gardiano, Commented May 3, 2020 at 20:54
So... basically a toggle? A boolean state?.....there's some global state count and you want a single button to either add +1 if enabled, +0 if not? — Drew Reese
– Drew Reese, Commented May 3, 2020 at 20:56
Check how to increase decrease count on click of same button in React — awran5
– awran5, Commented May 3, 2020 at 21:04

Carlos Saiz Orteu · Accepted Answer · 2020-05-03 21:17:12Z

0

You could set a conditional in the function you trigger when you click on the button. Maybe something like this:

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
      clicked: false,
    };
  }

  toggleClicked = () => {
      const counter = this.state.clicked ? counter +1 : counter - 1;
      const clicked = !this.state.clicked;

      this.setState({ counter, clicked })
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleClicked}>Click</button>

        { this.state.counter ? <h2>{ this.state.counter }</h2> : '' }
      </div>
    );
  }
}

export default App;

This way if you have already clicked the counter will decrease by 1 and viceversa.

answered May 3, 2020 at 21:17

Carlos Saiz Orteu

1,8151 gold badge13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Increment / Decrement function in ReactJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related