score:4

const handleChange = (e) => {
    const value = e.target.value;
    const clean = value.replace(/,/g, "");
    const regex = /^[0-9]*\.?[0-9]*$/;

    if (value && clean.match(regex)) {
      if (!value.includes(".")) {
        const formatted = new Intl.NumberFormat().format(parseFloat(clean));
        setDisplayVal(formatted);
      } else {
        setDisplayVal(value);
      }
    } else {
      setDisplayVal("");
    }
};

<input
    className="cal__section__form__container--input"
    placeholder={0}
    type="text"
    value={displayVal}
    onChange={handleChange}
/>

Related Query

More Query from same tag