TypeError: Cannot read property 'setFieldValue' of undefined. Formik doesn't recognise setFieldValue

Question

I'm trying to create an image upload on my form. The problem is when I try to change the value to the actual uploaded file. I am trying to use setFieldValue, but it says it is undefined. Below is the code. Any ideas why it is undefined? I thought it comes with Formik.

import { Formik } from 'formik';


const AddProduct = (props) => {

  return (
    <Formik
      initialValues={{
        serviceImage: null
      }}
      
      onSubmit={(values) => {
        console.log(values);
        
      }}
    >
      {({
        errors,
        handleBlur,
        handleChange,
        handleSubmit,
        setFieldValue,
        isSubmitting,
        touched,
        values,
        formProps
      }) => (
        <form onSubmit={handleSubmit}>
          <TextField
            error={Boolean(touched.serviceName && errors.serviceName)}
            fullWidth
            helperText={touched.serviceName && errors.serviceName}
            label="Service name"
            margin="normal"
            name="serviceName"
            onBlur={handleBlur}
            onChange={handleChange}
            value={values.serviceName}
          />

          <Button>
            <input
              id="file"
              name="serviceImage"
              value={values.serviceImage}
              type="file"
              onChange={(event) => formProps.setFieldValue('serviceImage', event.target)
              }
            />
            Add an Image
          </Button>

            <Button
              type="submit"            >
              Post this service on the Events Platform
            </Button>
        </form>
        
      )}
    </Formik>
  );
};

Answer 1

You already declare setFieldValue in your formik callback function

So change it to:

<input
  id="file"
  name="serviceImage"
  value={values.serviceImage}
  type="file"
  onChange={event => setFieldValue('serviceImage', event.currentTarget.files[0])}
/>;