React - Formik as select wont render select options generated by loop-CodePudding

I am working with a register form and right now I want to make sure that the user writes in their date of birth.

At the moment, I am using loop generated values. I want to make sure the user is at least 18 years of age. To do this, I made a function like this

export const AgeLimit = (limit: number) => {
    let ageLimit = new Date();
    ageLimit.setFullYear(ageLimit.getFullYear() - limit);

    return ageLimit.getFullYear();
}

and I also created a loop like this

export const YearLoop = (startValue: number, endValue: number, array: any[]) => {
     for(let i = startValue; i >= endValue; i--) {
        let value = {values: `${i}`};
        array.push(value)
    }
}

And I use it togheter like this

export const allYears: any[] = [];
YearLoop(AgeLimit(18), AgeLimit(100), allYears);

This does return the years I want.

But when trying to render the years it wont work, I use formik This is my formik code

import { ReactElement } from 'react'
import { ErrorMessage, Field } from "formik"

export const SelectField = (props: selectFieldProps) => (
    <section className={props.className}>
        <label htmlFor={props.field}>{props.displayName}</label>
        <Field as="select" name={props.field} id={props.field} className={props.fieldClassName} >
            <option value={props.optionValue}>{props.optionLabel}</option>
            {props.children}
        </Field>
        <ErrorMessage name={props.field}>{msg => 
            <p>{msg}</p>}</ErrorMessage>
    </section>
)

interface selectFieldProps {
    field: string;
    displayName?: string;
    className?: string;
    fieldClassName?: string;
    children: ReactElement;
    optionValue: string;
    optionLabel: string;
}

I use the react formik component like this

<SelectField field="year" optionValue="" optionLabel="Year">
      <>
         {allYears.map((year, index) => 
           <option key={index} value={year.value}>{year.value}</option>)}
      </>  
</SelectField>

This does however work when using any other kind of array. But not when working with the loop generated array

And when using just jsx code without formik, it also works. Like this

 <select>
      <option value="">Year</option>
      {allYears.map(year => 
          <option key={year.values} value={year.values}>{year.values}</option>)}
 </select>

This works just fine.

Anyone knows why it does not work with the formik code? And what could I do to fix this?

Many thanks!

CodePudding user response：

It appears the solution to the issue was fairly simple.

in the formik select

<SelectField field="year" optionValue="" optionLabel="Year">
      <>
         {allYears.map((year, index) => 
           <option key={index} value={year.value}>{year.value}</option>)}
      </>  
</SelectField>

I just use year.value but it should have been year.values

its strange that it didnt give me an error on this typo.