CODEWITHSUNDEEP
javascriptreactjs
Uriah RV
Uriah RV

Reputation: 105

react counter increase until input value

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;

Upvotes: 2

Views: 4284

Answers (4)

Ejaz
Ejaz

Reputation: 1632

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.

Upvotes: 1

Tom Erik St&#248;wer
Tom Erik St&#248;wer

Reputation: 1409

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
}

Upvotes: 3

Drew Reese
Drew Reese

Reputation: 202836

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 });
};

Edit epic-benz-fqbo6

Upvotes: 0

Ajay Ghosh
Ajay Ghosh

Reputation: 439

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;

Upvotes: -1

Related Questions