Error

Form.getFieldDecorator is an Ant Design Form validation tool, it is used to wrapped input components and handle value and value validation. It is working fine with common component with a props named value, but it throws error when used to wrap a Checkbox.

error
1
Warning: [antd: Checkbox] `value` is not validate prop, do you mean `checked`?

Solution

Checkbox is a component that demonstrates and returns a checked status, it simply does not have a props named value build within. So the way to handle this error is simple, I just have to create a custom Checkbox which maps the options of Form.getFieldDecorator to Checkbox’s props.

React Component
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { PureComponent } from 'react';
import { Checkbox } from 'antd';

export default class CustomCheckbox extends PureComponent {
render() {
return (
<Checkbox
defaultChecked={this.props.initialValue}
checked={this.props.value}
onChange={this.props.onChange}>
{this.props.text}
</Checkbox>
);
}
}