Ant Design : getFieldDecorator()

Question

import {
 Form, Input, Tooltip, Icon
} from 'antd';
 import React , {Component }from 'react';
import ReactDOM from 'react-dom';

export default class RegistrationForm extends Component {
     state = {
     confirmDirty: false,
     autoCompleteResult: [],
     };

     handleSubmit = (e) => {
         e.preventDefault();
         this.props.form.validateFieldsAndScroll((err, values) => {
         if (!err) {
            console.log('Received values of form: ', values);
          }
       });
       }

     handleConfirmBlur = (e) => {
         const value = e.target.value;
         this.setState({ confirmDirty: this.state.confirmDirty || !!value                
         });
         }

        render() {
           console.log(this.props.form)
             const { getFieldDecorator } = this.props.form;

             const formItemLayout = {
             labelCol: {
                   xs: { span: 24 },
                   sm: { span: 8 },
                 },
              wrapperCol: {
                  xs: { span: 24 },
                  sm: { span: 16 },
              },
             };

return (
  <Form {...formItemLayout} onSubmit={this.handleSubmit}>
    <Form.Item
      label="E-mail"
      >
      {getFieldDecorator('email', {
        rules: [{
          type: 'email', message: 'The input is not valid E-mail!',
        }, {
          required: true, message: 'Please input your E-mail!',
        }],
      })(
        <Input />
        )}
    </Form.Item>

    <Form.Item
      label={(
        <span>
          Nickname&nbsp;
          <Tooltip title="What do you want others to call you?">
            <Icon type="question-circle-o" />
          </Tooltip>
        </span>
      )}
      >
      {getFieldDecorator('nickname', {
        rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
      })(
        <Input />
        )}
    </Form.Item>
  </Form>
);
  }
   }

I am using ant design but when I run this code it says this.props.form is undefined. In this line when I declare getFieldDecorator in render function.

Please tell from where are these props coming and how to use it ? I do not have any parent component that is passing any prop. help fix it. thanks in advance.

Answer 1

please export your component like

export default Form.create()(RegistrationForm)