'React Number format does not allow to range validation

Requirement is I need to take a input from user for weight, which will be in a range between 3 to 21 weight, for max-limit I am able to achieve it, but for 0,1,2 what should I do .

      <Form.Group className="num-group">
                                              <NumberFormat
                                                className="form-control"
                                                allowNegative={false}
                                                value={Number(
                                                  comment.weight
                                                )}
                                                isAllowed={checkLength}
                                                onValueChange={(e) =>
                                                  handleValueChange(
                                                    e,
                                                    index,
                                                    "weight"
                                                  )
                                                }
                                              />
                                            </Form.Group>
  const checkLength = (inputObj) => {
    const { value, floatValue, formattedValue } = inputObj;
    console.log(inputObj);
    if (value <= 20) return true;

    return false;
  };
  const handleValueChange = (e, index, name) => {
    console.log(e.value);
    let result = Number(e.value.length) <= 2;

    if (result) {
      const tempData = [...data];
      tempData[index] = { ...tempData[index], [`${name}`]: Number(e.value) };
      setData(tempData);
    }
  };

What I need to achieve is, user is suppose to edit field, should only take values between 3-21 values.

Currently as per onValueChange Function when I do Backspace to change the value, it become zero that is expected result , but I need only user type 3-21 values.

If write logic value >=3 && value <=20, in this is case it is not allowing me change as it works on ONchange and take only one value at time.

for example if number is 3 and I need to make it 4, so it will not allow me to do so if I write range logic.

Because it when we edit first it became zero and then we will enter details.

Please suggest what should I do ?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source