Invalid prop `checked` of type `string` supplied to `Switch`, expected `boolean`

[YassineDM]

Importing the Switch component fires this warning in the console:

Warning: Failed prop type: Invalid prop checked of type string supplied to Switch, expected boolean.

The implementation is rather straightforward:

const CustomForm = ({ formData, setFormData }) => (
    <Formik initialValues={formData} onSubmit={(values) => setFormData(values)}>
        <Form>
            <Form.Item name="customSwitch">
                <Switch name="customSwitch" defaultChecked />
            </Form.Item>
            <SubmitButton />
        </Form>
    </Formik>
)

I don't know if it is part of the issue but the defaultChecked prop is not taken into account...

By the way, I successfully imported other components such as Checkbox, DatePicker, Input, InputNumber, Radio & SubmitButton.

Relevant packages:

"dependencies": {
  "@craco/craco": "^5.6.3",
  "antd": "^4.0.2",
  "craco-antd": "^1.14.1",
  "formik": "^2.1.4",
  "formik-antd": "^2.0.0",
}

[jannikbuschke]

Can you remove the defaultCheck prop from the component and instead put a default value into initialValues and see if this resolves your issue? (i.e. initialValues={{customSwitch: true}}

Default values on ant design components do not work.

[YassineDM]

You're right, it is 'fixed'. And now that you mention it, it seems that default values do not work. Do you know why?

[jannikbuschke]

It is by design, however not well documented. Formik does all form state management. So values (including initial values), touches, submissions, errors are managed with formik. It does not make sense to put initial values onto ant design components, because formik would not "see" them. It also does not make sense to hook into ant designs defaultValue and set values on formik. Formik already provides a mechanism to set defaults (the initialValues prop).

[YassineDM]

Ok this makes sense, thank you for the explanation...