In ReactJs using Formik library to handle form & Yup library - reactjs

Question

In ReactJs using formik library to handle form & Yup library for form validation rule, as i am trying to use "yup.array().of()" validator to validate array of fields (name, gender) which are passed from other component through props and i have stored this components in another component using accordion which is like the stepper, but it isn't working for me as i am not able to get the validation.
function FormBrowserG(props) {
const { intl } = props;
const peopleArray = props.peopleArrayValue;
//initial values
const initialValues = {
people: []
}
//creating the validation schema
const validationSchema = Yup.object().shape({
people: Yup.array().of(
Yup.object().shape({
name: Yup.string()
.required('Name is required'),
gender: Yup.string()
.required('gender is required')
})
)
});
//using useFormik
const formik = useFormik({
initialValues,
validationSchema,
onSubmit: (values) => {
}
});
const people = []
for (let index = 0; index < props.numberOfPeopleValue; index++) {
people.push(
<fieldset className="fieldset">
<legend className="legend">Person</legend>
<div className="display-flex">
<div className="formname">
<label className="gendername"><FormattedMessage id="AUTH.GENDER.LABEL" /></label>
<select
{...formik.getFieldProps('gender')}
className="form-control">
<option>Select</option>
<option key={10}>Male</option>
<option key={20}>Female </option>
</select>
{formik.touched.gender && formik.errors.gender ? (
<div className="warnings">{formik.errors.gender}</div>
) : null}
</div>
<div className="formo">
<label className="gendername"><FormattedMessage id="AUTH.SIGN_UP.NAME.LABEL" /></label>
<input
type="text"
id={`name${index}`}
className="name"
{...formik.getFieldProps(`name${index}`)}
required
/>
{formik.touched.name && formik.errors.name ? (
<div className="warnings">{formik.errors.name}</div>
) : null}
</div>
</div>
</fieldset>
)
}
return (
<>
<form onSubmit={formik.handleSubmit}>
<div className="row">
{people}
</div>
</form>
<div className="bofferingbtn">
<Link to={{
pathname: "/Confirmation",
state: value
}}>
<Button variant="contained" type="submit" className="obtn" size="large" color="primary" >
<FormattedMessage id="AUTH.OFFERING.BUTTON" />
</Button>
</Link>
</div>
</>
)
}
export default injectIntl(FormBrowserG)

Answer 1

You need to pass your values to formik like this -
initialValues={{ name: "", gender: "" }}
onSubmit={...}
//this will automatically validate the field
validationSchema={validationSchema}