Kevin Powell - Community•6mo ago

problem with input type number

Hi guys, when the value of quantity is 0 and I enter 1 the input field display "01" while the quantity is 1. Can anyone help me explain why ? I'm using MUI. This case only occurs when I use type number. With type text, it worked

  const [quantity, setQuantity] = useState(0);
  const [stock, setStock] = useState(0);

  const handleOnChangeQuantity = (
    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    if (!e.target.value) return setQuantity(0);
    if (+e.target.value > stock) return setQuantity(stock);
    setQuantity(+e.target.value);
  };

  <TextFieldCustom
                type="number"
                fullWidth
                value={quantity}
                onChange={handleOnChangeQuantity}
                className={styles["input-number"]}
                inputProps={{ min: 0, max: stock }}
   />

  const [quantity, setQuantity] = useState(0);
  const [stock, setStock] = useState(0);

  const handleOnChangeQuantity = (
    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    if (!e.target.value) return setQuantity(0);
    if (+e.target.value > stock) return setQuantity(stock);
    setQuantity(+e.target.value);
  };

  <TextFieldCustom
                type="number"
                fullWidth
                value={quantity}
                onChange={handleOnChangeQuantity}
                className={styles["input-number"]}
                inputProps={{ min: 0, max: stock }}
   />

7 Replies

emptyOP•6mo ago

Here is codesandbox: https://codesandbox.io/p/sandbox/priceless-heisenberg-3wl24f?file=%2Fsrc%2FApp.js

RAiDeRTuRbO•6mo ago

Looks like you've fixed this now..? You appear to have changed the value={quantity} to value={quantity.toString()} now..? Did that fix the issue for you?

emptyOP•6mo ago

Yeah. But idk why

Choo♚𝕂𝕚𝕟𝕘•6mo ago

Did you originally have += instead of +? That would have concatenated the new value to the previous one. Changing that to a plus performs the unary plus operation of converting a string to a number.

emptyOP•6mo ago

No, I use plus operation to convert string to a number

MarkBoots•6mo ago

fyi, you can also use .valueAsNumber()

Tenkes•6mo ago

Not a function. So just .valueAsNumber

Gaming

Programming

problem with input type number