I'm using react-select with Formik and Yup to validate my form, but for some reason my validation is not working. My Schema looks like this:

const Schema = Yup.object().shape({
age: Yup.object().shape({
    label: Yup.string().required("Required"),
    value: Yup.string().required("Required")
})
});

And my data looks like this:

export const ageOptions = [
  { value: 0.1, label: "Not born yet" },
  { value: 0.3, label: "Baby - 0 to 3 months" },
  { value: 0.6, label: "Baby - 3 to 6 months" },
  { value: 0.12, label: "Baby - 6 to 12 months" },
  { value: 0.18, label: "Baby - 12 to 18 months" },
  { value: 0.24, label: "Baby - 18 to 24 months" },
  { value: 2, label: "2 years" },
  { value: 3, label: "3 years" },
  { value: 4, label: "4 years" },
  { value: 5, label: "5 years" },
  { value: 6, label: "6 years" },
  { value: 7, label: "7 years" },
  { value: 8, label: "8 years" },
  { value: 9, label: "9 years" },
  { value: 10, label: "10 years" },
  { value: 11, label: "11 years" },
  { value: 12, label: "12 years" },
  { value: 13, label: "13 years" },
  { value: 14, label: "14 years" }
];

When I select an option in the select inside the UI, the following error is returned:

age must be a `object` type, but the final value was: `null` (cast from the value `0.6`). If "null" is intended as an empty value be sure to mark the schema as `.nullable()`

How do I make the validation work correctly?

Link to sandbox

I'm using react-select with Formik and Yup to validate my form, but for some reason my validation is not working. My Schema looks like this:

const Schema = Yup.object().shape({
age: Yup.object().shape({
    label: Yup.string().required("Required"),
    value: Yup.string().required("Required")
})
});

And my data looks like this:

export const ageOptions = [
  { value: 0.1, label: "Not born yet" },
  { value: 0.3, label: "Baby - 0 to 3 months" },
  { value: 0.6, label: "Baby - 3 to 6 months" },
  { value: 0.12, label: "Baby - 6 to 12 months" },
  { value: 0.18, label: "Baby - 12 to 18 months" },
  { value: 0.24, label: "Baby - 18 to 24 months" },
  { value: 2, label: "2 years" },
  { value: 3, label: "3 years" },
  { value: 4, label: "4 years" },
  { value: 5, label: "5 years" },
  { value: 6, label: "6 years" },
  { value: 7, label: "7 years" },
  { value: 8, label: "8 years" },
  { value: 9, label: "9 years" },
  { value: 10, label: "10 years" },
  { value: 11, label: "11 years" },
  { value: 12, label: "12 years" },
  { value: 13, label: "13 years" },
  { value: 14, label: "14 years" }
];

When I select an option in the select inside the UI, the following error is returned:

age must be a `object` type, but the final value was: `null` (cast from the value `0.6`). If "null" is intended as an empty value be sure to mark the schema as `.nullable()`

How do I make the validation work correctly?

Link to sandbox

• javascript
• reactjs
• react-select
• formik
• yup

2 Answers 2

You require age to be of type object, but set it the value of the selected option. That is what triggers your wrong validation. Here is how to fix your validation:

1. If you want to keep age to be an object, change your schema to the following:

const Schema = Yup.object().shape({
    age: Yup.object().shape({
        label: Yup.string().required("Required"),
        value: Yup.string().required("Required")
    })
});

else set it to the following:

const Schema = Yup.object().shape({
    age: Yup.string()
});

2. Update your onChange on the Select component to set the value to the option instead of the option.value if you want to use the object in your schema validation.

<Select
    { ... }
    value={field.value} // This can be set like this as a result of the change
    onChange={option => form.setFieldValue(field.name, option)}
/>

That should get it to work.

Yup Validation Schema

const validationSchema = function (values) {
  return Yup.object().shape({  
    courseId: Yup.string().required("Required").nullable()
  })
}

React-select custom class component

import React from "react";
import Select from "react-select";

class SingleSelectField extends React.Component {
  constructor(props) {
    super(props);
  }

  handleChange = (item) => {
    if (item) this.props.onChange(this.props.type, item.value);
    else this.props.onChange(this.props.type, "");
  };

  handleBlur = () => {
    this.props.onBlur(this.props.type, true);
  };

  render() {
    const defaultValue = (options, value) => {
      return options ? options.find((option) => option.value === value) : "";
    };

    return (
      <div>
        <Select
          options={this.props.options}
          onChange={this.handleChange}
          onBlur={this.handleBlur}
          value={defaultValue(this.props.options, this.props.value)}
          isClearable
        />
        {!!this.props.error && this.props.touched && (
          <div style={{ color: "red", marginTop: ".5rem" }}>{this.props.error}</div>
        )}
      </div>
    );
  }
}

export { SingleSelectField as default };