How to enable manual value text input in custom increment-decrement field in REACT.js


I’m pretty new to react so please bear with me. I’m trying to create a custom increment/decrement quantity selector. Everything is working as I want it to except it’s not allowing me to manually change the value of the input box. I can’t figure out how to enable manual input.

I want to allow the user to be able to change the value using the increment/decrement buttons or manually enter a numeric value. Thanks in advance!!

const Quantity = ({max}) => {

    const [qty, setQty] = useState(0)
    let increaseQty = () => setQty(qty + 1)
    let decreaseQty = () => setQty(qty - 1)

    if(qty<=0){
        decreaseQty = () => setQty(0)
    }

    if(qty>=max){
        increaseQty = () => setQty(max)
    }

    return (
       <div>
            <Button onClick={increaseQty}> - </Button>
            <input  type="text" value={qty}/>
            <Button onClick={decreaseQty}> + </Button>        
        </div>
    )
 }

 export default Quantity

Source: React – Stack Overflow

August 19, 2021
Category : News
Tags: decrement | increment | javascript | reactjs | user-input

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.