<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
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> </> } }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)