title: Cannot read property 'getFieldDecorator' of undefined as I try to use antd's form within a component
body: <p>I am trying to use antd's <a href="https://ant.design/components/form/" rel="nofollow noreferrer">form</a> with typescript. I am not sure what am I doing incorrectly. When I try to render the component I get an error saying :</p>
  
  <pre><code>TypeError: Cannot read property 'getFieldDecorator' of undefined
  </code></pre>
  
  <p>This happens at the first line of the render method :</p>
  
  <pre><code>const { getFieldDecorator } = this.props.form;
  </code></pre>
  
  <p>Why is <code>form</code> undefined with component's <code>this.props</code>? I tried to read through, but could not get the exact reason for this error.</p>
  
  <pre><code>   import React from "react";
     import { Button, Input, message, Form, Radio } from "antd";
     import { FormComponentProps } from "antd/lib/form/Form";
     import { withWideContainer, withHeader } from "client/components/WithContainer";
  
      const FormItem = Form.Item;
  
  
      type state = {};
  
      type props = {};
  
      class CleaningLimitPolicies extends React.Component&lt;
      FormComponentProps &amp; props,
      state
      &gt; {
          constructor(props) {
              super(props);
  
              this.state = {};
          }
  
          afterValid() {}
  
          render() {
  
              // FOLLOWING LINE THROWS THE ERROR
  
              const { getFieldDecorator } = this.props.form;
  
              const view = (
              &lt;div className="d-flex align-items-start"&gt;
                  &lt;Form onSubmit={this.afterValid}&gt;
                  &lt;FormItem label="Use Microbial Limits?"&gt;
                      {getFieldDecorator("use_microbial_limits", {
                      rules: [
                          {
                          required: true,
                          message: "Please fill out this field"
                          }
                      ],
                      initialValue: true
                      })(
                      &lt;Radio.Group&gt;
                          &lt;Radio value={true}&gt;Yes&lt;/Radio&gt;
                          &lt;Radio value={false}&gt;No&lt;/Radio&gt;
                      &lt;/Radio.Group&gt;
                      )}
                  &lt;/FormItem&gt;
                  &lt;Button
                      type="primary"
                      htmlType="submit"
                      style={{ display: "none" }}
                  /&gt;
                  &lt;/Form&gt;
              &lt;/div&gt;
              );
  
              return withWideContainer(view);
          }
      }
  
      const CleaningLimitPolicy = withHeader(
          CleaningLimitPolicies,
          "Policy",
          true
      );
  
      export default CleaningLimitPolicy;
  </code></pre>
  
  <p>The above component is exported and rendered from another component.  Wha could be the reason I am getting this error?</p>