How to make button decrease and increase QTY in react?

See more:

CSS

buttons

HTML5

ClickOnce

, +

Hi Team

I need help with below functionality on my buttons but i must not need to use react-bootstrap;

<pre lang="text"><pre>If the value is 0, - butoon should be grayed out and non-clickable. If the value is 3 and you press + value changes to 4. if an incorrect value is entered using input field(e.g -10), on blur-event that value should change to last valid valued used instead

What I have tried:

import React,{ useEffect, useState} from 'react';
function Footer() {
    // buttons to decrease and increase 
     const [counter, setCounter] = useState(0);  
     const incrementCount = () => {  
       // Update state with incremented value  
       setCounter(counter + 1);  
     };  
     const decrementCount = () => {  
       // Update state with incremented value  
       setCounter((c) => Math.max(c - 1, 0));  
     }; 

   return(){
      <>
        <div className="btn-group" role="group"> <button type="button" className="btn btn-warning" onClick={decrementCount} > - -</button>  
        <input type="number" min="1" defaultValue={counter} className="form-control" />  
        <button  type="button"  className="btn btn-warning"  onClick={incrementCount} > + </button> 
      </>

     }




}