React yup validation leads to promise error field.resolve is not a function-CodePudding

I've followed tutorials on yup and tried many ways to do this but don't understand the error on simple form validation. I get the error field.resolve is not a function.

This is the snippet of code inside the onClick function:

const registrationSchema = yup.object().shape({
      username: yup.string().required,
      email: yup.string().email().required,
      password: yup.string().min(0).max(10).required,
    });

    const formData = {
      username: registerUsername,
      email: registerEmail,
      password: registerPassword,
    };

    const answer = registrationSchema.isValid(formData).then(function (valid) {
      console.log("works");
    });

I'm really confused over how and why this is't working.

CodePudding user response：

Your required should be required() like:

const registrationSchema = yup.object().shape({
      username: yup.string().required(), // <-------
      email: yup.string().email().required(), // <-------
      password: yup.string().min(0).max(10).required(), // <-------
    });

    const formData = {
      username: registerUsername,
      email: registerEmail,
      password: registerPassword,
    };

    const answer = registrationSchema.isValid(formData).then(function (valid) {
      console.log("works");
    });

Credit: https://github.com/jaredpalmer/formik/issues/1040#issuecomment-624803999