formik

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

I'm trying to implement the approach described on https://www.youtube.com/watch?v=5gl3cCB_26M , where all Redux actions are just plain objects (as they were meant to be) and API calls are done by middlewares. By doing this, the dispatched actions are no longer thunks and can't return a Promise . So I won't be able to use Formik's setSubmitting (to set the isSubmitting flag to false ) inside the submit handler, like the code samples on Formik docs and other tutorials I've found. I've solved the issue in a kinda ugly way, saving a reference of setSubmitting to run it later, inside

I have an email field that only gets shown if a checkbox is selected (boolean value is true ). When the form get submitted, I only what this field to be required if the checkbox is checked (boolean is true). This is what I've tried so far: const validationSchema = yup.object().shape({ email: yup .string() .email() .label('Email') .when('showEmail', { is: true, then: yup.string().required('Must enter email address'), }), }) I've tried several other variations, but I get errors from Formik and Yup: Uncaught (in promise) TypeError: Cannot read property 'length' of undefined at yupToFormErrors

Current Behavior <Formik isInitialValid initialValues={{ first_name: 'Test', email: 'test@mail.com' }} validate={validate} ref={node => (this.form = node)} onSubmitCallback={this.onSubmitCallback} render={formProps => { const fieldProps = { formProps, margin: 'normal', fullWidth: true, }; const {values} = formProps; return ( <Fragment> <form noValidate> <TextField {...fieldProps} required autoFocus value={values.first_name} type="text" name="first_name" /> <TextField {...fieldProps} name="last_name" type="text" /> <TextField {...fieldProps} required name="email" type="email" value={values