Linked Questions

Popular Questions

Four buttons use One Function?

Asked by At

I'm writing this in React.

Right now I have 2 sets of numbers which are controlled by 4 buttons; 2 increment buttons and 2 decrement buttons. The increment buttons raise each number, the decrement buttons lower each number.

I've created a function that does this for one of the decrement buttons. But I don't know how to make it dynamic based on which button is clicked. I don't want 4 separate functions, I'd prefer 2 functions or even just 1.

This is the function:

decrementClick() {
        if (this.state.breakLength > 1) {
          this.setState({ breakLength: this.state.breakLength - 1 })
        }  
    }

And this is the JSX code:

<button id="break-decrement" onClick={this.decrementClick.bind(this.decrementClick)}>▼</button>

I can pass a value from the button into the function, but how can it modify the proper state?

Related Questions