Formik: ant design select and date picker

Created on 26 Aug 2018 · 6Comments · Source: formium/formik

I'm trying to work with ant design form items with Formik
it is working very smoothly except when it comes to date picker or select
it reads the initial value but handle change gives this error

Uncaught TypeError: Cannot read property 'type' of undefined
    at executeChange (formik.esm.js:203)
    at Object.Formik._this.handleChange [as onChange] (formik.esm.js:231)
    at Object.CalenderWrapper._this.handleChange [as onChange] (createPicker.js:51)
    at ProxyComponent.onCalendarSelect (Picker.js:106)
    at Object.chainedFunction [as onSelect] (createChainedFunction.js:18)
    at ProxyComponent.setSelectedValue (CalendarMixin.js:92)
    at ProxyComponent.onSelect (CalendarMixin.js:63)
    at ProxyComponent.onDateTableSelect (Calendar.js:159)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at Object.invokeGuardedCallback (react-dom.development.js:187)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201)
    at executeDispatch (react-dom.development.js:461)
    at executeDispatchesInOrder (react-dom.development.js:480)
    at executeDispatchesAndRelease (react-dom.development.js:581)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:592)
    at forEachAccumulated (react-dom.development.js:562)
    at runEventsInBatch (react-dom.development.js:723)
    at runExtractedEventsInBatch (react-dom.development.js:732)
    at handleTopLevel (react-dom.development.js:4477)
    at batchedUpdates$1 (react-dom.development.js:16660)
    at batchedUpdates (react-dom.development.js:2131)
    at dispatchEvent (react-dom.development.js:4556)
    at interactiveUpdates$1 (react-dom.development.js:16715)
    at interactiveUpdates (react-dom.development.js:2150)
    at dispatchInteractiveEvent (react-dom.development.js:4533)

Source

ahmadtharwt

Most helpful comment

@raisiqueira

<DatePicker
  placeholder="Data de Nascimento"
  style={{ width: '100%' }}
  onChange={(_, dateString) => setFieldValue('birthday', dateString)}
  value={values.birthday}
/>

You forgot to call the value that will receive the DateString (In this case, birthday)
Qualquer coisa dá um toque ;)

yuritoledo on 21 Sep 2018

👍11 ❤8

All 6 comments

On onChange event, try to use (event, {name, values /* idk about ant API, but works on semantic-UI*/}) => setFieldValues('name', value)

yuritoledo on 13 Sep 2018

👍1

Hey @yuritoledo, i have the some problem with antd.

<DatePicker
  placeholder="Data de Nascimento"
  style={{ width: '100%' }}
  onChange={(date, dateString) => setFieldValue(dateString)}
  value={values.birthday}
/>

How to pass the value from DatePicker to the Formik?

raisiqueira on 21 Sep 2018

👍2

@raisiqueira

<DatePicker
  placeholder="Data de Nascimento"
  style={{ width: '100%' }}
  onChange={(_, dateString) => setFieldValue('birthday', dateString)}
  value={values.birthday}
/>

You forgot to call the value that will receive the DateString (In this case, birthday)
Qualquer coisa dá um toque ;)

yuritoledo on 21 Sep 2018

👍11 ❤8

now they can close the issue. 😬

raisiqueira on 22 Sep 2018

👍1

Thank you for your help

ahmadtharwt on 22 Sep 2018

@raisiqueira
<DatePicker
  placeholder="Data de Nascimento"
  style={{ width: '100%' }}
  onChange={(_, dateString) => setFieldValue('birthday', dateString)}
  value={values.birthday}
/>
You forgot to call the value that will receive the DateString (In this case, birthday)
Qualquer coisa dá um toque ;)

Hi, now i want to resetForm when submit, but i dont know how?