In ReactJs using Formik library to handle form & Yup library

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)

theabrar theabrar · Accepted Answer · 2021-02-08T09:11:15

You need to pass your values to formik like this -

initialValues={{ name: "", gender: "" }}
                    onSubmit={...}
//this will automatically validate the field

                    validationSchema={validationSchema}

In ReactJs using Formik library to handle form & Yup library

1 Answers