ShinChven's Blog

Use Ant Design Checkbox with getFieldDecorator


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.

``log error Warning: [antd: Checkbox]valueis not validate prop, do you meanchecked`?

## 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](https://github.com/ant-design/ant-design/blob/master/components/form/Form.tsx#L81) of `Form.getFieldDecorator` to [Checkbox's props](https://github.com/ant-design/ant-design/blob/master/components/checkbox/Checkbox.tsx#L15). 

jsx // React Component import React, { PureComponent } from 'react'; import { Checkbox } from 'antd';

export default class CustomCheckbox extends PureComponent { render() { return ( {this.props.text} ); } }