React Number Component.

NumberComponent.jsx

export const NumberComponent = (props) => {
  const [myVal, setMyVal] = useState(props.value);
  // update myVal if props.value changes on a rerender. useState only updates on initial render
  if (myVal != props.value) setMyVal(props.value);
  const onValChange = (e) => {
    const { value, validity } = e.target;
    if (myVal != props.value) setMyVal(props.value);
    else setMyVal(value);
    if (validity.valid) props.onChangeFunction(e);
  };

  return (
    <div className="col-lg-5 col-sm-8 p-3 border m-1 rounded-3">
      🔢
      <label className="h5">
        {props.name} {props.isRequired ? "❗Required!" : ""}
      </label>
      <input
        disabled={props.disabled}
        type={"text"}
        name={props.name}
        // pattern="[0-9]*"
        // pattern="[0-9]+([\.,][0-9]+)?"
        // pattern="^([-+,0-9.]+)"
        // pattern="^\$?(([1-9](\d*|\d{0,2}(,\d{3})*))|0)(\.\d{1,2})?$"
        pattern="^(([-+]?[0-9](\d*)))(\.\d{0,2})?$"
        step="0.01"
        className="form-control shadow-none mt-2 border border-primary rounded-3"
        value={myVal ? myVal : ""}
        // onChange={props.onChangeFunction}
        onChange={onValChange}
      />
    </div>
  );
};