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

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


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) => voidFormik: 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>  );}