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

Question

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={decreaseQty}> - </Button>
            <input  type="text" value={qty}/>
            <Button onClick={increaseQty}> + </Button>        
        </div>
    )
 }

 export default Quantity

Answer 1

onChange={onChange} is required for the user to be able to enter the value manually.

 import React, { useState } from "react"; const Quantity = ({ max }) => { const [qty, setQty] = useState(0); const decreaseQty = () => { if (qty <= 0) { setQty(0); } else { setQty(qty - 1); } }; const increaseQty = () => { if (qty >= max) { setQty(max); } else { setQty(qty + 1); } }; const onChange = (e) => { const value = parseInt(e.target.value); if (value >= 0 && value <= max) { setQty(value); } }; return ( <div> <button onClick={decreaseQty}> - </button> <input type="text" onChange={onChange} value={qty} /> <button onClick={increaseQty}> + </button> </div> ); }; export default Quantity;

Answer 2

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

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

    if(qty>=max){
       increaseQty = () => setQty(max)
    }
    const manuallyUpdate = (event) => {
        let newvalue=parseInt(event.target.value)
        if(newvalue <= 0){
            setQty(0)
        }else if(newvalue >= parseInt(max)){
            setQty(max)
        }else{
            setQty(newvalue)
        }
    }

    return (
        <Container maxWidth="lg" style={{paddingTop:"5%"}}>
            <div>
               <Button onClick={decreaseQty}> - </Button>
               <input  type="text" value={qty} onChange={(e) => manuallyUpdate(e)}/>
               <Button onClick={increaseQty}> + </Button>
            </div>
        </Container>
    )
}

Answer 3

The issue is the functional component only runs once at render time. Therefore, the if statements checking for 0 or max won't run when this is changed. Instead, if you include the if statement in the function body then it will run each time the function is fired.

You could implement something similar to this:

const Quantity = ({ max }) => {
  const [qty, setQty] = useState(0);

  function decreaseQty() {
    if (qty <= 0) {
      setQty(0);
    } else {
      setQty(qrt - 1);
    }
  }

  function increaseQty() {
    if (qty >= max) {
      setQty(max);
    } else {
      setQty(qrt + 1);
    }
  }

  function onChange(e) {
    const v = e.target.value;
    if (v <= 0) setQty(0);
    else if (v >= max) setQty(max);
    else setQty(v);
  }

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

export default Quantity;