Make counter not be less than zero in React.js

Consider the following code :

import React, { Component } from 'react';

class Counter extends Component {
  state = { value: 5 };

  increment = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  };

  decrement = () => {
    this.setState(prevState => ({
      value: prevState.value - 1
    }));
  };

  render() {
    return (
      <div>
        {this.state.value}
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    )
  }
}

How can I make it so that whenever I click the Decrement button, the value will not be less than 0. The value’s minimum will always be zero and not -1, -2 ,-3 ,-4 …

65 thoughts on “Make counter not be less than zero in React.js”

Leave a Comment