jaredpalmer / jaredpalmer/formik

Behavior difference between `useFormik<IProps[]>` and `FormikProps<IProps[]>`

Open
#3,333 1 comment 0 reactions 0 assignees View on GitHub
Type: Bug
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:

![image](https://user-images.githubusercontent.com/35376824/132272041-108d7c22-2f8f-43ff-8199-b6bd2c0c9815.png)

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

![image](https://user-images.githubusercontent.com/35376824/132271142-e85346e7-2e11-46cb-b04d-c67330a0f66e.png)

### 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.