Using Charka React Select Single Option With ReactHook Form And Yup Validator

[nguyenphucminh]

Currently, i'm using chakra-select with react-hook-form and yup validator. I saw the example you implement on codesandbox: https://codesandbox.io/s/chakra-react-select-react-hook-form-with-yup-validation-typescript-n7slhu?file=/app.tsx. But when i'm trying to implement with single-type-select. It's not produce error message, would you please help me to implement one? Appreciate your answer.

[csandman]

Sure, the main difference is that in your yup schema, instead of a yup.array() type you want to use a yup.object() type.

So the new schema might look something like this:

const schema = yup.object().shape({
  firstName: yup.string().required("First name is required"),
  lastName: yup.string().required("Last name is required"),
  email: yup
    .string()
    .email("Please enter a valid email")
    .required("Email is required"),
  password: yup
    .string()
    .required("Password is required")
    .min(6, "Password must be at least 6 characters"),
  passwordConfirmation: yup
    .string()
    .oneOf([yup.ref("password"), null], "Passwords must match.")
    .required("You must confirm your password."),
  termsAndConditions: yup
    .boolean()
    .oneOf([true], "The terms and conditions must be accepted."),
  signupReasons: yup
    .object()
    .shape({
      label: yup.string(),
      value: yup.string(),
    })
    .nullable()
    .required("You must select a reason for signing up"),
});

You can even ignore the .shape part of the object and just implement it like this:

const schema = yup.object().shape({
  // ...
  signupReasons: yup
    .object()
    .nullable()
    .required("You must select a reason for signing up"),
});

Here's a modified version of the example you linked to above working with a single select: https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-yup-validation-typescript-phmv0u?file=/app.tsx:1088-1923

[nguyenphucminh]

Thank you for your answer