Use Ant Design Checkbox with getFieldDecoratorUse Ant Design Checkbox with getFieldDecoratorUse Ant Design Checkbox with getFieldDecorator

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.

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
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>
    );
  }
}