Click here to Skip to main content
15,920,383 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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));  

        <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> 



This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900