Cannot read property 'type' of undefined while using react-select with formik

Question

I'm building a form with an auto filling text box using react-select and formik.

<Formik
    initialValues={{
        assignedTo: task.assignedTo,
    }}
    onSubmit={(values) => {
        const updatedTask = { ...task, ...values };
        editTask(updatedTask);
    }}
    render={({ handleSubmit, handleChange, values }) => (
        <form>
            <Select type="text" name="assignedTo" options={options} onChange={handleChange} value={{ value: task.assignedTo, label: task.assignedTo }} />
        </form>
    })
/>

It throws an error Cannot read property 'type' of undefined

How to fix this and handle react-select in formik?

Answer 1

the first parameter of React-Select's onChange is an option value while the first parameter of formik's handleChange is an event

React-Select: onChange(value, action) => void
Formik: handleChange(e: React.ChangeEvent<any>) => void

That is the reason why you received this kind of error.

Here is my approach. I hope this helps you.

import React from 'react';
import { Formik, Form, Field } from 'formik';
import Select from 'react-select';

function SelectField(FieldProps) {
  return (
    <Select
      options={FieldProps.options}
      {...FieldProps.field}
      onChange={option => FieldProps.form.setFieldValue(FieldProps.field.name, option)}
    />
  )
}

export default function FormikReactSelect(props) {
  const options = [
    { value: '1', label: 'White' },
    { value: '2', label: 'Yellow' },
  ];
  return (
    <Formik>
      {formProps => (
        <Form>
          <Field name='SelectColor' options={options} component={SelectField}/>
        </Form>
      )}
    </Formik>
  );
}

Answer 2

As already stated, onChange handler on React-Select is different from the handleChange handler on formik. I arrived at this from the official formik.org documentation...

Notice, I don't spread the field values like so {...field} into the react-select form because that's the problem we're trying to fix. The field values contain the onChange handler from formik which we intend to remove.

Instead, I only assign the field.name to the name attribute, and then manually set the value using the setValue handler provided through the useField helpers. This worked for me.

import { useField, Formik } from 'formik';
import Select from 'react-select';

export default function SelectInput(props) {
  const [field, meta, helpers] = useField(props);

  const options = [
    { value: '1', label: 'White' },
    { value: '2', label: 'Yellow' },
  ];

  return (
    <Formik>
      <Select
        options={options}
        onChange={(option) => helpers.setValue(option?.value)}
        name={field.name}
        placeholder={props.placeholder}
      />
      {meta.touched && meta.error ? <div>{meta.error}</div> : null}
    </div>
  );
}

Answer 3

I had the same error but found a solution

try this

onChange={e => formik.setFieldValue('language', e[0].value)}

.setFieldValue is a Formik method that needs two arguments, first is the field name which's the value you want to update, and second, is the value

e will be an array with one or multiple selected objects, in my case, there was only one so I accessed the only object using e[0] and then bind the required property from the object, which in my case was e[0].value