score:4

Accepted answer

whenever count is decreased get the maximum value (using math.max()) of count - 1 after and 0:

const { usestate } = react;

const home = () => {
  const [count, setcount] = usestate(0);
  const onclick = () => {
    setcount(c => c + 1);
  };
  const onclickdec = () => {
    setcount(c => math.max(c - 1, 0));
  };

  return (
    <div>
      <h1>please click me for increase {count}</h1>
      <button classname="btn btn-primary btn-sm" onclick={onclick}>
        +
      </button>
      <button classname="btn btn-primary btn-sm" onclick={onclickdec}>
        -
      </button>
    </div>
  );
};

reactdom.render(
  <home />,
  root
)
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

you can use the same idea if you want to limit increase to a certain number using math.min():

const { usestate } = react;

const home = () => {
  const [count, setcount] = usestate(0);
  const onclick = () => {
    setcount(c => math.min(c + 1, 3));
  };
  const onclickdec = () => {
    setcount(c => math.max(c - 1, 0));
  };

  return (
    <div>
      <h1>please click me for increase {count}</h1>
      <button classname="btn btn-primary btn-sm" onclick={onclick}>
        +
      </button>
      <button classname="btn btn-primary btn-sm" onclick={onclickdec}>
        -
      </button>
    </div>
  );
};

reactdom.render(
  <home />,
  root
)
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

score:0

imo. the simplest solution would be to disable the button.

const { usestate } = react;

const home = () => {
  const [count, setcount] = usestate(0);
  const onclick = () => {
setcount(count + 1);
  };
  const onclickdec = () => {
setcount(count - 1);
  };

  return (
<div>
  <h1>please click me for increase {count}</h1>
  <button classname="btn btn-primary btn-sm" onclick={onclick}>
    +
  </button>
  <button disabled={count < 1} classname="btn btn-primary btn-sm" onclick={onclickdec}>
    -
  </button>
</div>
  );
};

reactdom.render(
  <home />,
  root
)
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

score:0

this might be helpful. avoids negative values by conditionally hiding the (-) button. also gives a reset button.

class classcount extends component {
    constructor(props) {
      super(props)
    
      this.state = {
         count:0
      }
    }

    handleincrement=()=>{
        this.setstate(prevstate =>{
          return{count: prevstate.count + 1}
        })
    }
    handledecrement=()=>{
        this.setstate((prevstate)=>{
            return{count: prevstate.count - 1}
        })
    }
    handlereset=()=>{
        this.setstate((prevstate)=>{
            return{count: 0}
        })
    }

  render() {
      var mycount = this.state.count;
    return (
      <div>
          <h3>count is {mycount}</h3>
          <button classname='btn btn-success m-1' onclick={this.handleincrement}>+</button>
          {
              mycount >=1 ? <button classname='btn btn-danger m-1' onclick={this.handledecrement}>-</button> : ''
          }
          {
              mycount >0 ? <button classname='btn btn-info m-2' onclick={this.handlereset}>reset</button> : ''
          }
          
          
      </div>
    )
  }
}

Related Query

More Query from same tag