Formik pass customized Props to custom Field Component

user_9036224 0
Viewed 3880

Good evening everyone, I am having a small issue with custom Formik Fields..

I am using an own custom Field such as:

<Field name="pdfFile" component={FileUpload} />

FileUpload Props look like:

interface FileUploadProps {
    field: FieldInputProps<any>; //These props should probably be derived from Formik
    form: FormikProps<any>;
    width: string;
    height: string;
}

field and form are correctly passed into the component, but how can I pass width and height into the component? Tried it like, but without success.

<Field 
    name="pdfFile" 
    component={(props: any) => (
        <FileUpload
            field={props.field}
            form={props.form}
            width={pdfWidth}
            height={pdfHeight}
        />
    )} 
/>

Formik API unfortunately doesn't mention how to solve this problem. Has anyone experienced similar issues and knows how to resolve this?

Thanks a lot for your help!

formik typescript reactjs
1 Answers

If you pass a prop to Field that isn't used in Field, it will be passed to the component in the component prop.

So you can do it like

<Field 
    name="pdfFile" 
    width={pdfWidth}
    height={pdfHeight}
    component={FileUpload} 
/>

and get the value in the component props

const FileUpload = (props) => {
    // props.width
    // props.height
    return ( /* ... */ )
}
user_91191860
Related