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