CODEWITHSUNDEEP
javascriptreactjstypescriptantd
Suhail Gupta
Suhail Gupta

Reputation: 23256

Cannot read property 'getFieldDecorator' of undefined as I try to use antd's form within a component

I am trying to use antd's form with typescript. I am not sure what am I doing incorrectly. When I try to render the component I get an error saying :

TypeError: Cannot read property 'getFieldDecorator' of undefined

This happens at the first line of the render method :

const { getFieldDecorator } = this.props.form;

Why is form undefined with component's this.props? I tried to read through, but could not get the exact reason for this error.

   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<
    FormComponentProps & props,
    state
    > {
        constructor(props) {
            super(props);

            this.state = {};
        }

        afterValid() {}

        render() {

            // FOLLOWING LINE THROWS THE ERROR

            const { getFieldDecorator } = this.props.form;

            const view = (
            <div className="d-flex align-items-start">
                <Form onSubmit={this.afterValid}>
                <FormItem label="Use Microbial Limits?">
                    {getFieldDecorator("use_microbial_limits", {
                    rules: [
                        {
                        required: true,
                        message: "Please fill out this field"
                        }
                    ],
                    initialValue: true
                    })(
                    <Radio.Group>
                        <Radio value={true}>Yes</Radio>
                        <Radio value={false}>No</Radio>
                    </Radio.Group>
                    )}
                </FormItem>
                <Button
                    type="primary"
                    htmlType="submit"
                    style={{ display: "none" }}
                />
                </Form>
            </div>
            );

            return withWideContainer(view);
        }
    }

    const CleaningLimitPolicy = withHeader(
        CleaningLimitPolicies,
        "Policy",
        true
    );

    export default CleaningLimitPolicy;

The above component is exported and rendered from another component. Wha could be the reason I am getting this error?

Upvotes: 0

Views: 2634

Answers (1)

sathish kumar
sathish kumar

Reputation: 1507

You need to Wrap your component with Antd Form.create() like below : 

CleaningLimitPolicy = Form.create(name : "yourFormName")(CleaningLimitPolicy)
export default CleaningLimitPolicy;

Upvotes: 4

Related Questions