react counter increase until input value

Question

i am new to react and was making a basic counter. Logic might not be perfect but for now i want my counter to increase until the input value. Currently it decreases until 0 and increases unlimited. how can implement or bind my onChange function to onIncrease function?

import React from 'react';
import './App.css';

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      counter: 0,
      inputText: '',
    }
  }

  // TODO: i should be able to increase only up to given input number
  onChange = (event) => {
    let inputText = event.target.value;
    this.setState({inputText});
  }

  onIncrease = () => {
      let counter = this.state.counter +1;
      this.setState({counter})
  }

  onDecrease = () => {
    if (this.state.counter > 0){
      let counter = this.state.counter -1;
      this.setState({counter})
    } 
  }

  render() {
    console.log(this.state.counter);
    return (
      <div className="App">
        <h2 id='s'>Counter: {this.state.counter}</h2>
        <input onChange= {this.onChange}/>
        <button onClick={this.onIncrease}>Increase</button>
        <button onClick={this.onDecrease}>Decrease</button>
      </div>
    )
  }
}

export default App;

Tom Erik Støwer · Accepted Answer · 2019-09-13 17:04:32Z

3

In your decrease function, you check to see that the current counter is larger than zero, before decreasing. You should implement a similar check in the increase function. E.g., check that the current counter is below the value from the input field.

A couple of more things I would do to reduce the amount of logic in the increase function to a minimum:

In the initial state, set a "maxValue" property to Infinity
parse the input value an int in the onChange function, and use it to update the maxValue property of the state
Use the maxValue from the state in the increase function

// in constructor:
this.state = {
  ...
  maxValue: Infinity
};

// in onChange:
this.setState({
  maxValue: parseInt(e.target.value)
});

// in increase function:
if (this.state.counter < this.state.maxValue) { 
  //increase here
}

answered Sep 13, 2019 at 17:04

Tom Erik Støwer

1,40910 silver badges19 bronze badges

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

1 Comment

Uriah RV Over a year ago

Thanks this helped. Yes, i was aware that my logic was somewhat wrong. Now i learned to put correct logic first and then implement it)

Ejaz · Accepted Answer · 2019-09-13 17:17:55Z

1

You can put a similar check as you have put in onDecrease method.

And I think one more check should be put incase the input value was more that the current counter value. May be we can change the counter to the new input value.

  onChange = event => {
    let inputText = event.target.value;
    if (this.state.counter > Number(inputText)) {
      this.setState({
        counter: Number(inputText),
        inputText
      });
    } else {
      this.setState({ inputText });
    }
  };

  onIncrease = () => {
    if (this.state.counter < Number(this.state.inputText)) {
      let counter = this.state.counter + 1;
      this.setState({ counter });
    }
  };

You can add checks to user inputs too, like if a user inputs some string.

answered Sep 13, 2019 at 17:17

Ejaz

1,6425 gold badges28 silver badges54 bronze badges

1 Comment

Emile Bergeron Over a year ago

You could store the limit directly in the state as a number, instead of having to do Number(this.state.inputText) everywhere.

Drew Reese · Accepted Answer · 2019-09-13 17:00:05Z

0

You want to cap the min and max values of the count:

onChange = event => {
  let inputText = Number(event.target.value);
  this.setState({ inputText });
};

onIncrease = () => {
  let counter = Math.min(this.state.counter + 1, this.state.inputText);
  this.setState({ counter });
};

onDecrease = () => {
  let counter = Math.max(0, this.state.counter - 1);
  this.setState({ counter });
};

answered Sep 13, 2019 at 17:00

Drew Reese

207k19 gold badges281 silver badges293 bronze badges

Comments

Ajay Ghosh · Accepted Answer · 2019-09-13 16:56:50Z

import React from 'react';
import './App.css';

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      counter: 0,
      inputValue: 0,
    }
  }

  // TODO: i should be able to increase only up to given input number
  onChange = (event) => {
    let inputValue = event.target.value;
    this.setState({inputValue});
  }

  onIncrease = () => {
      if (this.state.counter < this.state.inputValue){
      let counter = this.state.counter +1;
      this.setState({counter})
  }

  onDecrease = () => {
    if (this.state.counter > 0){
      let counter = this.state.counter -1;
      this.setState({counter})
    } 
  }

  render() {
    console.log(this.state.counter);
    return (
      <div className="App">
        <h2 id='s'>Counter: {this.state.counter}</h2>
        <input onChange= {this.onChange}/>
        <button onClick={this.onIncrease}>Increase</button>
        <button onClick={this.onDecrease}>Decrease</button>
      </div>
    )
  }
}

export default App;

Collectives™ on Stack Overflow

react counter increase until input value

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related