When using DatePicker and useField: TypeError: target is undefined

[watafakap]

I use 'formik-antd' and using this code with Form:

import { Formik } from 'formik'
import { useField } from 'formik'
import {
  Form,
  DatePicker as AntDatePicker
} from 'formik-antd'
const DatePicker = ({ label, ...props }) => {
  const [ field ] = useField(props)
  return (
    <Form.Item
      label={label}
      name={props.name}
    >
      <AntDatePicker {...field} {...props} />
    </Form.Item>
  )
}

const MyForm = () => {
  let initialValues = {
    date: ''
  }

  let onSubmit = async (values) => {
    console.log(values)
  }

  return (
    <Formik {...{ initialValues, onSubmit }}>
      {({ values }) => {
        return (
          <Form layout="vertical">
            <DatePicker label="Date" name="date" />
            <Button type="primary" htmlType="submit">
               Send
            </Button>
          </Form>
        )
      }}
    </Formik>
  )
}

Before that I used other components in the same way and they worked. Is there a fix for the problem?

[jannikbuschke]

hi @watafakap,

In this line <AntDatePicker {...field} {...props} /> you are basically reimplementing formik-antd. The idea of formik-antd is that you dont need to hook up formik and antd by yourself.

So the correct usage of AntDatePicker (from formik-antd) is to just pass in the name prop and add some styling. But do not profide onChange and value props (which you are doing, by spreading the formik values from the useField hook.