reactjs - Validation is not working.. As this data is passed from array from FormBrowser component

Question

Validation is not working for the data which is generated from an array

    import React from 'react'
    import Button from '@material-ui/core/Button';
    import { Link } from 'react-router-dom'
    import '../common.scss';
    import { useFormik } from "formik";
    import * as Yup from "yup";
    import { FormattedMessage, injectIntl } from "react-intl";
    function FormBrowserG(props) {
      const { intl } = props;
      const peopleArray = props.peopleArrayValue;
      //initial values
      const initialValues = {
        peopleArray :[]
      }
      console.log("Arrays",peopleArray);
    
      //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()
                .email('gender is invalid')
                .required('gender is required')
        })
        )
    });
        //using useFormik
    const formik = useFormik({
      initialValues,
      validationSchema,
      onSubmit:(values) => {
      // console.log(values);
    }
    });
       
    // console.log("props =======",props);
    let value = {};
    if(props) {
      value = {
        numberOfPeopleValue: props.numberOfPeopleValue,
        offeringValue: props.offeringValue,
        ratePerQuantityValue:props.ratePerQuantityValue,
        selectedDateValue: props.selectedDateValue,
        organizationNameValue: props.organizationNameValue,
        peopleArrayValue: props.peopleArrayValue
      }
    }
    // console.log(" props ================== ", props.numberOfPeopleValue );
    
    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>undefined</>
    )
    }
    export default injectIntl(FormBrowserG)

question from:https://stackoverflow.com/questions/66062482/validation-is-not-working-as-this-data-is-passed-from-array-from-formbrowser-c

Answer 1

Waitting for answers