jaredpalmer / jaredpalmer/formik
Behavior difference between `useFormik<IProps[]>` and `FormikProps<IProps[]>`
- Dominant language
- TypeScript
- Stars
- 34.3k
- Forks
- 2.8k
- PR merge metrics
- No merged PRs in 30d
Description
## Bug report
### Current Behavior
I am trying to send a typed form to a component and I am getting this error:

Apparently props are not being set the same way by `useFormik` and `FormikProps`
```tsx
import * as Yup from 'yup'
import { ReactElement } from 'react'
import { useFormik, FormikProps } from 'formik'
interface SelectTruckProps {
TrailerYear_TXT: string
TrailerMake_TXT: string
TrailerUpdate_DATE: number
}
function SelectTruck ({ form }: { form: FormikProps }): ReactElement {
// I wan't to use typed form here
}
export default function MainComponent(): ReactElement {
const formikFormTrailers = useFormik({
initialValues: [],
enableReinitialize: true,
validationSchema: Yup.array().of(
Yup.object().shape({
TrailerYear_TXT: Yup.string().required('This is required'),
TrailerMake_TXT: Yup.string().required('This is required')
})
),
onSubmit: onSubmit
})
return (
)
}
```
### Expected behavior
I expect to not get any error, I am not sure if I should use something different to `FormikProps`
### Reproducible example
WIP
I'll update this later because am a little bit busy and there is no TS template
### Suggested solution(s)
Maybe set `initialErrors` to something like `FormikErrors` in `Formik.d.ts` may work
If that's the problem probably in the long term will be better to extend `Formik.d.ts` from the `FormikErrors` on `types` to avoid this kind of errors

### Your environment
| Software | Version(s) |
| -------------- | ---------- |
| Formik | 2.2.9 |
| React | 17.0.2 |
| TypeScript | 4.1.2 |
| Browser | chrome 92.0.4515.159 |
| Node | v14.17.5 |
| NPM | 6.14.14 |
| Operating System | Windows 10 |
Contributor guide
Research direction
Start by inspecting Formik.d.ts and the FormikErrors types involved in useFormik and FormikProps. Reproduce the reported TypeScript error with the SelectTruckProps[] example, then verify that the two APIs expose compatible types without changing the expected form behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100