Click here to Skip to main content
15,394,540 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;

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

     }




}
Posted

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