Redefine Generics in the child component

Viewed 27

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.

1 Answers

Figured out that I can use the generics as follows:

export default SmallerFormComponent<T extends SmallerFormTypes>(props: SmallerFormComponentProps) { ... }
Related