TypeError: Cannot read property 'getFieldDecorator' of undefined

Vibol picture Vibol · Dec 30, 2017 · Viewed 12.9k times · Source

I'm trying to follow the steps provided by Ant design documentation, but I get an error:

TypeError: Cannot read property 'getFieldDecorator' of undefined

import React, { Component } from 'react'
import ReactDom from 'react-dom'
import { Icon, Input, Form} from 'antd'

//
import Header from './layout/Header'

// Import Css
import '../css/Home.css'

class Home extends Component {
    render() {
    const { getFieldDecorator } = this.props.form
    return (
      <div>
        <Form>
        {getFieldDecorator('userName', {
          rules: [{ required: true, message: 'Please input your username!' }],
        })(
          <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
        )}
        </Form>
      </div>
    )
  }
}

const WrappedLogin = Form.create()(Home)
ReactDom.render(<WrappedLogin/>, document.getElementById('root'))

export default Home

Did I miss anything?

FYI

antd: 3.1.0 react: 16.2.0 react-dom: 16.2.0

Remark

console.log(this.props.form) // ** return getFieldDecorator: f()

Answer

gabouy picture gabouy · Apr 13, 2018

In my case it worked to match the exported identified to the const

export default WrappedLogin