Source:  Twitter logo

I'm trying to use DatePicker within Formik. But when I click DatePicker's date its form value is not changed. Instead, I got this error:

Uncaught TypeError: e.persist is not a function at Formik._this.handleChange (formik.es6.js:5960)

I shortify code, the code is below

const SomeComponent = () => (
    <Formik
        render={({
            values,
            handleSubmit,
            handleChange,
            setFieldValue
        }) => {
            return (
                <div>
                    <form onSubmit={handleSubmit}>
                        <DatePicker
                            name={'joinedAt'}
                            value={values['joinedAt']}
                            onChange={handleChange}
                        />
                    </form>
                </div>
            )
        }}
    />
)

I googled few documents, https://github.com/jaredpalmer/formik/issues/187 and https://github.com/jaredpalmer/formik/issues/86

So I tried like below, but it's not working.

 ...setFieldValue

 <DatePicker
   name={'joinedAt'}
   value={values['joinedAt']}
   onChange={setFieldValue}
 />

I resolve this like

<DatePicker
   name={'joinedAt'}
   value={values['joinedAt']}
   onChange={e => setFieldValue('joinedAt', e)}
/>

Update on 2020-03-08:

You can use e.target.value on setFieldValue's second prop, depends on your custom input design. Thanks to Brandon.

70 users liked answer #0dislike answer #070
ton1 profile pic
ton1

If you have deeper nesting, you should use Formik Field. Example:


<Formik
    validationSchema={schema}
    initialValues={initialValues}
    onSubmit={(values, actions) => {}}
>

  <Field name="colors" component={ColorsEditor}  colors={colorArray}/>
</Formik>


const ColorsEditor = ({ field, colors, form, ...props }) => {

    return (
        <div>
            <Button onClick={() => form.setFieldValue('colors', "myValue")}>
            </Button>
        </div>
    )
}

So the Field component already include the form, where live the setFieldValue that you can use where you need. It also include the errors and needed fields for additional customization.

12 users liked answer #1dislike answer #112
Hugo Gresse profile pic
Hugo Gresse

The Formik solution for this is the useField() method. You may need to create a wrapper for components like DatePicker that you may not have source access to.

The documentation provides an example:

const MyTextField = ({ label, ...props }) => {
   const [field, meta, helpers] = useField(props);
   return (
     <>
       <label>
         {label}
         <input {...field} {...props} />
       </label>
       {meta.touched && meta.error ? (
         <div className="error">{meta.error}</div>
       ) : null}
     </>
   );
 };

In short, the method takes in the custom props which describe the field. Then you can expand the assigned field value and props in your custom field.

1 users liked answer #2dislike answer #21
Jaryt profile pic
Jaryt

For html primitive input fields handleChange works like a charm, but for custom components, you've to use setFieldValue to change the value imperatively.

onChange={e => setFieldValue('joinedAt', e)}
3 users liked answer #3dislike answer #33
Imdadul Huq Naim profile pic
Imdadul Huq Naim

The accepted answer didn't work for me and didn't show the selected date. It has been almost a year so there might be some changes with the implementation. Though this can be fix by using toDateString() like this

<DatePicker
   name={'joinedAt'}
   value={values['joinedAt']}
   onChange={e => setFieldValue('joinedAt', e.toDateString())}
 />
3 users liked answer #4dislike answer #43
brijmcq profile pic
brijmcq

https://github.com/jaredpalmer/formik/issues/692

you need to set value manually if you are using setFieldValue method

0 users liked answer #5dislike answer #50
Varis Bhalala profile pic
Varis Bhalala

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).