React Select giving formik.touch issues

Viewed 748

Hi guys I am using react-select in my project along with Formik and Yup for validation The issue is even though I see an error in error object in the console after validating it through Yup but I am not able to show that error on the frontend

Here is the code below

export default function FormSection({
  onContinueButton,
  allFormValues,
  holders,
}) {
  console.log(holders, "hol12");

  const formik = useFormik({
    initialValues: {
      firstBirthDate: "",
      firstSmoker: "",
      secondBirthDate: "",
      secondSmoker: "",
    },

    onSubmit: (values, { setSubmitting }) => {
      console.log(formik.errors);
      console.log(formik.values, "valqwqrwe");

      setSubmitting(false);
      allFormValues(formik.values);
      console.log(values);
    },
    validationSchema: validationSchemaSectionTwo,
  });
  const options = [
    { value: "Não", label: "Não" },
    { value: "Sim", label: "Sim" },
  ];

  const handleChangeFirstHolder = (selectedOption) => {
    formik.setFieldValue("firstSmoker", selectedOption);
  };


  return (
    <div className="secondSection">
      <form onSubmit={formik.handleSubmit}>
        <React.Fragment>
 <p className="tab-text">Data Nascimento</p>
            <DatePicker
              selected={formik.values.firstBirthDate}
              onChange={date => {
                formik.setFieldValue('firstBirthDate', date)
              }}
              className="birth-date-calendar"
              dateFormat="dd-MM-yyyy"
              name="firstBirthDate"
              placeholderText="DD-MM-AAAA"
              onBlur={formik.handleBlur}
            />
            {formik.errors.firstBirthDate && formik.touched.firstBirthDate && (
              <div className="formik-errors">{formik.errors.firstBirthDate}</div>
            )}


              <p className="tab-text">É fumador?</p>
              <Select
                value={formik.values.firstSmoker}
                name="firstSmoker"
                onChange={handleChangeFirstHolder}
                options={options}
                className="select-smoker"
                onBlur={formik.handleBlur}
              />
              {formik.errors.firstSmoker && formik.touched.firstSmoker && (
                <div className="formik-errors">{formik.errors.firstSmoker}</div>
              )}
            </React.Fragment>
    
            <br />
      </form>
    </div>
  );
}

I also tried

onBlur={()=> {
       formik.setTouched({ firstSmoker: true });
   }}

but what this method does is as soon as i foucus on <Select/> tag but then it sets formik.touched.firstBirthDate to undefined

0 Answers
Related