CODEWITHSUNDEEP
javascriptreactjstypeerrorformik
R. Kohlisch
R. Kohlisch

Reputation: 2993

Formik - TypeError: Cannot read property 'type' of undefined?

I've pretty much just copy pasted this code from here :

function Checkbox(props) {
  return (
    <Field name={props.name}>
      {({ field, form }) => (
        <label>
          <input
            {...field}
            type="checkbox"
            checked={field.value.includes(props.value)}
            onChange={() => {
              const set = new Set(field.value);
              if (set.has(props.value)) {
                set.delete(props.value);
              } else {
                set.add(props.value);
              }
              field.onChange(field.name)(Array.from(set)); //the problem seems to lie here somewhere!
              form.setFieldTouched(field.name, true);
            }}
          />
          {props.value}
        </label>
      )}
    </Field>
  );
}

function App() {
  return (
    <Formik
      initialValues={{ roles: [] }}
      onSubmit={values => alert(JSON.stringify(values, null, 2))}
    >
      {formik => (
        <div>
          Clicking checks affects `VALUES` and `ERRORS` but never `TOUCHED`...
          <div>
            <Checkbox name="roles" value="admin" />
            <Checkbox name="roles" value="customer" />
          </div>
          <br />
          VALUES:
          <pre>{JSON.stringify(formik.values, null, 2)}</pre>
          ERRORS:
          <pre>{JSON.stringify(formik.errors, null, 2)}</pre>
          TOUCHED:
          <pre>{JSON.stringify(formik.touched, null, 2)}</pre>
        </div>
      )}
    </Formik>
  );
}

The Sandbox seems to be working, but whenever I check a checkbox locally, I get TypeError: Cannot read property 'type' of undefined

TypeError: Cannot read property 'type' of undefined
(anonymous function)
node_modules/formik/dist/formik.esm.js:659
  656 |   dispatch({
  657 |     type: 'SET_ERRORS',
  658 |     payload: errors
> 659 |   });
  660 | }, []);
  661 | var setValues = useEventCallback(function (values) {
  662 |   dispatch({

Not sure what I've done wrong here?

Upvotes: 8

Views: 33397

Answers (5)

SaaD Ibne Jamal
SaaD Ibne Jamal

Reputation: 13

I was facing almost same problem but with react-datepicker. I have solved it in the following way.

import React from 'react';
import { useField, useFormikContext } from 'formik';
import DatePicker from 'react-datepicker';

import { FormDateInputPropsType } from './interfaces';
import styles from './styles.module.css';
import 'react-datepicker/dist/react-datepicker.css';

const FormDate = (props: FormDateInputPropsType) => {
    const { id, label, disabled, minDate, maxDate, ...fieldHookConfigProps } = props;

    const [field, meta] = useField(fieldHookConfigProps);
    const { setFieldValue } = useFormikContext();

    const hasError = () => {
        if (id !== field.name) {
            return false;
        }

        return !!(meta.touched && meta.error);
    };

    return (
        <div className={styles.formDateInput}>
            <div className={styles.label}>{label}</div>
            <DatePicker
                id={id}
                name={id}
                dateFormat="DD/MM/YYYY"
                className={styles.datePicker}
                wrapperClassName={styles.datePickerWrapper}
                selected={field.value ? new Date(field.value) : null}
                minDate={minDate}
                maxDate={maxDate}
                disabled={disabled}
                onChange={(d) => {
                    if (!d) {
                        return;
                    }

                    setFieldValue(id, Date.parse(d.toString()));
                }}
            />
            {hasError() ? <div className={styles.errorMessage}>{meta.error}</div> : null}
        </div>
    );
};

export default FormDate;

Upvotes: 0

Nayan Chauhan
Nayan Chauhan

Reputation: 31

I face the same issue when i use form with <FieldArray/> component so i find the best solution.

wrap up your form or formik components with formik provider

<FormikProvider value={formik}> 
  <Formik/>
</FormikProvider>

Upvotes: 0

Tabish Javed
Tabish Javed

Reputation: 987

Instead of field.onChange use setFieldValue helper function

field.onChange(field.name)(Array.from(set)); //the problem seems to lie here somewhere!

replace with:

form.setFieldValue(field.name,(Array.from(set)));

https://codesandbox.io/embed/formik-checkbox-example-l9p1p?fontsize=14&hidenavigation=1&theme=dark

Upvotes: 18

Sooraj
Sooraj

Reputation: 10567

If anyone stumbles across this with a basic from producing the above error, it could be because you missed adding initialValues to Formik component.

Just fix it by adding

<Formik initialValues={{}} onSubmit={handleSubmit}>

This fixed it for me!

Upvotes: 18

Rahul Gupta
Rahul Gupta

Reputation: 17

There is some action issue in your react-redux so i suggest you to please check your action type i think you action type is not defined that's why it shows undefined and getting error.

Upvotes: 0

Related Questions