TypeError: Cannot read property 'validateFields' of undefined ReactJS

Question

I have two pages addressForm.js and index.js. In addressForm.js page the code for Form is written. Sample code shown below.

<Col >
                    <div style={{'height': '45px','display':'flex'}}> 
                    <label style={{'color': '#f5222d', 'paddingTop': '10px','fontFamily': 'SimSun'}}>*</label>&nbsp;
                    <label style={{'width':'74px','paddingTop':'8px'}}>Customer Name:</label>                       
                        <FormItem >
                        {getFieldDecorator('Name', {
                        initialValue: '',
                        rules: [{
                            required: true, 
                            message: (
                              <Tooltip
                                visible={true} placement="topRight"
                                title="Please Input Customer Name"
                              />
                            ),
                        }],
                        })(
                        <Input placeholder="Customer Name" style={{'width':'164px'}} onChange={(e)=>{e.preventDefault(); e.stopPropagation();                                   
                            this.handleChange(0,e, 'Name')}}/>
                        )}                    
                    </FormItem>
                    </div>
                    </Col>

In the index.js page fuctions for the form is written (What to happen when the Submit button is clicked). Sample Code:

handleOk = () => {
    this.props.form.validateFields((err, values) => {
        if (!err) {
          /* Code.......*/
 }
    });
    }

The problem is that the validation is not working (ie.,validation checking is not done and I am getting this error).

Shall I import anything in index.js page to avoid the error?

TypeError: Cannot read property 'validateFields' of undefined ReactJS — Jane Fred
– Jane Fred, Commented Dec 6, 2018 at 6:47
this.props.form is undefined. Can you check this...stackoverflow.com/questions/41296668/… — sandy
– sandy, Commented Dec 6, 2018 at 6:53

Rizwan · Accepted Answer · 2019-02-17 00:45:34Z

1

you can solve this issue by trying this code:

class Devices extends React.Component {
   .................
}

Devices = Form.create({})(Devices);
export default Devices;

answered Feb 17, 2019 at 0:45

Rizwan

4,5132 gold badges31 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hackstreet_Boy · Accepted Answer · 2018-12-06 06:59:52Z

0

Something in your props is not being passed in or defined correctly, which is giving the TypeError. It looks like you might need to pass in props explicitly into your handleOk function - its hard to tell though with the snippets provided.

answered Dec 6, 2018 at 6:59

Hackstreet_Boy

416 bronze badges

Comments

Triyugi Narayan Mani · Accepted Answer · 2018-12-06 07:35:42Z

0

From the documentation, form should be decorated by Form.create.

If the form has been decorated by Form.create then it has this.props.form property.

class CustomizedForm extends React.Component {}

CustomizedForm = Form.create({})(CustomizedForm);

answered Dec 6, 2018 at 7:35

Triyugi Narayan Mani

3,1098 gold badges38 silver badges57 bronze badges

Collectives™ on Stack Overflow

TypeError: Cannot read property 'validateFields' of undefined ReactJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related