Yup.when: "`NaN` (cast from the value `NaN`)" Yup.when: "`NaN` (cast from the value `NaN`)" reactjs reactjs

Yup.when: "`NaN` (cast from the value `NaN`)"


You should use typeError

Here is an example from my code:

amount: Yup.number()                    .typeError('Amount must be a number')                    .required("Please provide plan cost.")                    .min(0, "Too little")                    .max(5000, 'Very costly!')


Since you want the field to still validate when the value is NaN and it's not a required field, changing your otherwise to this should fix it:

otherwise: Yup.number().notRequired().nullable()

Adding the .nullable() at the end is the key.