Typescript error in FormikErrors when using a field with a type Date

[JArdiotJnesis]

Bug report

Current Behavior

If model contains a field of type Date, the related error field has type FormikErrors<Date> and can not be used in the JSX/TSX. Error is : Type 'FormikErrors<Date> | undefined' is not assignable to type 'ReactNode'.

It seems to be due to the FormikErrors type which has been designed to handle nested object, but this behaviour doesn't work for Date type.

The error is only noticed with package "@types/react" 18.0.25". In version 17.0.52, type is the same but the error is not displayed.

Expected behavior

I expect that in the following sample I can use "formik.errors.creationDate" in the jsx code.

Reproducible example

With package "@types/react" 18.0.25

type ModelWithDate = {
    creationDate: Date;
  }

  const formik = useFormik<ModelWithDate>({
    initialValues: {
      creationDate: new Date(1, 1, 1, 0, 0),
    },
    onSubmit: form => {}
  });

  return (<div>{formik.errors.creationDate}</div>);

Suggested solution(s)

Change FormikErrors type to allow Date type.

Replacing [K in keyof Values]?: Values[K] extends any[] ? Values[K][number] extends object ? FormikErrors<Values[K][number]>[] | string | string[] : string | string[] : Values[K] extends object ? FormikErrors<Values[K]> : string; by [K in keyof Values]?: Values[K] extends any[] ? Values[K][number] extends object ? FormikErrors<Values[K][number]>[] | string | string[] : string | string[] : Values[K] extends Date ? string : Values[K] extends object ? FormikErrors<Values[K]> : string; do the job but there is maybe better to do.

Additional context

With package "@types/react" 18.0.25. Version <18 does not notice the error

Your environment

Software	Version(s)
Formik	2.2.9
React	18.2.0
TypeScript	4.6.3
Browser	Chromium 101
npm/Yarn	npm 8.19.2
Operating System	Arch Linux

[uguremirmustafa]

I am facing the same issue after upgrading to React 18.

[alande-amorim]

Same here

[anysofronova]

Same here

[OmKshirsagar]

same here.. Any fix guys?

[anysofronova]

same here.. Any fix guys?

 <DatePicker
      label='Дата конца'
      inputFormat='dd.MM.yyyy'
      value={formik.values.endDate}
      disabled={formik.isSubmitting}
      onChange={date => {
        formik.setFieldValue('endDate', date)
      }}
      maxDate={new Date()}
      minDate={new Date(formik.values.startDate)}
      renderInput={(params: any) => (
        <TextField
          {...params}
          required
          fullWidth
          size='small'
          name='endDate'
          disabled={formik.isSubmitting}
          error={formik.touched.endDate && Boolean(formik.errors.endDate)}
          helperText={formik.touched.endDate && formik.errors.endDate}
        />
      )}
    />

[OmKshirsagar]

same here.. Any fix guys?

 <DatePicker
      label='Дата конца'
      inputFormat='dd.MM.yyyy'
      value={formik.values.endDate}
      disabled={formik.isSubmitting}
      onChange={date => {
        formik.setFieldValue('endDate', date)
      }}
      maxDate={new Date()}
      minDate={new Date(formik.values.startDate)}
      renderInput={(params: any) => (
        <TextField
          {...params}
          required
          fullWidth
          size='small'
          name='endDate'
          disabled={formik.isSubmitting}
          error={formik.touched.endDate && Boolean(formik.errors.endDate)}
          helperText={formik.touched.endDate && formik.errors.endDate}
        />
      )}
    />

which date picker element and what all libraries are you using in the above code... can you give your entire file?

[anysofronova]

same here.. Any fix guys?

 <DatePicker
      label='Дата конца'
      inputFormat='dd.MM.yyyy'
      value={formik.values.endDate}
      disabled={formik.isSubmitting}
      onChange={date => {
        formik.setFieldValue('endDate', date)
      }}
      maxDate={new Date()}
      minDate={new Date(formik.values.startDate)}
      renderInput={(params: any) => (
        <TextField
          {...params}
          required
          fullWidth
          size='small'
          name='endDate'
          disabled={formik.isSubmitting}
          error={formik.touched.endDate && Boolean(formik.errors.endDate)}
          helperText={formik.touched.endDate && formik.errors.endDate}
        />
      )}
    />

which date picker element and what all libraries are you using in the above code... can you give your entire file?

I use:

import * as yup from 'yup'
import { useFormik } from 'formik'
import ru from 'date-fns/locale/ru'
import { TextField } from '@mui/material'
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers'
import { subDays, differenceInDays, endOfDay, format, isSameDay, isWithinInterval, startOfDay } from 'date-fns'

[AlexanderStoyanov]

same here.. Any fix guys?

 <DatePicker
      label='Дата конца'
      inputFormat='dd.MM.yyyy'
      value={formik.values.endDate}
      disabled={formik.isSubmitting}
      onChange={date => {
        formik.setFieldValue('endDate', date)
      }}
      maxDate={new Date()}
      minDate={new Date(formik.values.startDate)}
      renderInput={(params: any) => (
        <TextField
          {...params}
          required
          fullWidth
          size='small'
          name='endDate'
          disabled={formik.isSubmitting}
          error={formik.touched.endDate && Boolean(formik.errors.endDate)}
          helperText={formik.touched.endDate && formik.errors.endDate}
        />
      )}
    />

Wrapping formik error in react fragment seems to work ok:

helperText={(formik.touched.endDate && formik.errors.endDate) ? <>{formik.errors.endDate}</> : null}

[Yemisrach15]

same here.. Any fix guys?

 <DatePicker
      label='Дата конца'
      inputFormat='dd.MM.yyyy'
      value={formik.values.endDate}
      disabled={formik.isSubmitting}
      onChange={date => {
        formik.setFieldValue('endDate', date)
      }}
      maxDate={new Date()}
      minDate={new Date(formik.values.startDate)}
      renderInput={(params: any) => (
        <TextField
          {...params}
          required
          fullWidth
          size='small'
          name='endDate'
          disabled={formik.isSubmitting}
          error={formik.touched.endDate && Boolean(formik.errors.endDate)}
          helperText={formik.touched.endDate && formik.errors.endDate}
        />
      )}
    />

Wrapping formik error in react fragment seems to work ok:

helperText={(formik.touched.endDate && formik.errors.endDate) ? <>{formik.errors.endDate}</> : null}

It works but why?

[oleg3505]

Wrapping formik error in react fragment seems to work, but bug steel here; "formik": "^2.4.2"

[oleg3505]

Find another solution: just cast types {<ErrorText>{error as ReactNode}</ErrorText>}

[TarunSingh611]

use type cast : encountered similar error for {formik.touched[item?.name] && formik.errors[item?.name] && ( <div key={item.name} className="text-red-500 text-xs col-span-1 md:col-start-2 md:col-span-2 text-center "> {formik.errors[item.name]} //this line was showing squiggles but code was working fine ) }

i fixed it by typecasting to string : {String(formik.errors[item.name])}

[mmarifat]

The way I would suggest is just wrap with a empty jsx

<>{formik.errors.creationDate}</>