title: How to stop decrementing the value if it is less than zero in ReactJS?
body: <p>I have made 2 buttons one for increment and another for decrement. When I click on minus button it should not display negative values but in my case when I click on minus button (initially value zero ) it shows -1 and again on click it shows zero why is this happening when I click on minus button the value inside the input box should not get decremented below 0.</p>
  
  <p>datepicker.js :</p>
  
  <pre><code>import React, { Component } from 'react';
  import './datepicker.css';
  
  class DatePicker extends Component {
  
    constructor(props){
      super(props);
       this.state = {
          counter:0
       };
     }
  
    increment(){
      this.setState({
        counter: this.state.counter + 1
      });
    }
  
    decrement(){
        if(this.state.counter &lt; 0){
          this.setState({
              counter:0
          });
        }else {
          this.setState({
              counter: this.state.counter - 1
          });
        }
    }
  
  
    render() {
      return (
        &lt;div&gt;
          &lt;div id="center"&gt;
              &lt;label for="name"&gt;Date&lt;/label&gt;
              &lt;p&gt;&lt;/p&gt;
              &lt;button type="button" className="btn btn-success" id="plus" onClick={this.increment.bind(this)}&gt;+&lt;/button&gt;
              &lt;input type="text" id="date" value={this.state.counter}/&gt;
              &lt;button type="button" className="btn btn-danger" id="minus" onClick={this.decrement.bind(this)}&gt;-&lt;/button&gt; 
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default DatePicker;
  </code></pre>
  
  <p>Screenshot :
  In screnshot it shows -1 and now if I click it, it will show zero. I do not want to display negative values the lower bound must be 0 always.
  <a href="https://i.stack.imgur.com/VLxez.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VLxez.png" alt="enter image description here"></a></p>