I have two formik forms. The bigger one contains the smaller one, which was componentized to be used in many other bigger forms.
I defined formik as follows in the bigger form:
const formik = useFormik<BiggerFormSpecificTypes & SmallerFormTypes>
Then I pass that to the child component like this:
<SmallerFormComponent formik={formik}/>
Ideally, I want SmallerFormComponentProps to contain formik: FormikProps<SmallerFormTypes>, but that obviously doesn't work because formik that I pass down is already defined to be Formikprops<BiggerFormSpecificTypes & SmallerFormTypes> in the parent component.
So I end up doing this in the child component, which I don't like:
const { values, handleChange, setFieldValue } = formik as FormikProps<SmallerFormTypes>;
How should I type formik in the child component?
interface SmallerFormComponentProps {
formik: ???
}
I thought about using Partial, but that's to partially select from FormikProps, not to redefine FormikProps with SmallerFormTypes.