wrappedComponentRef is undefined in function component

[SuperShan0926]

class components with Form Wrraped could get this.form but function components got undefined `function InsertForm1 ({ form }) { const formItemLayout = { labelCol: { span: 24 }, wrapperCol: { span: 24}, }; const { getFieldDecorator } = form; return (

<Form.Item {...formItemLayout} label="Title" > {getFieldDecorator('title', { })( <Input placeholder="Title" /> )} </Form.Item>

) }

class InsertForm extends Component{ render(){ const formItemLayout = { labelCol: { span: 24 }, wrapperCol: { span: 24}, }; const { getFieldDecorator } = this.props.form; return (

<Form.Item {...formItemLayout} label="Title" > {getFieldDecorator('title', { })( <Input placeholder="Title" /> )} </Form.Item>

) } } const InsertFormWrapper = Form.create()(InsertForm); const InsertFormWrapper1 = Form.create()(InsertForm1);

export default InsertFormWrapper1;`

[justinlazaro-ubidy]

having an issue here

[halitogunc]

I have created a demo app that uses wrappedCompenentRef prop in fully functional component and it works. Check it out https://codesandbox.io/s/wrappedcomponentref-upzhn . It would be helpful.

[nzhl]

Just use use useImperativeHandle

// Your Function Form Component

function FunctionForm (props, ref) {

   ...
    // set ref.current to form instance
   React.useImperativeHandle(ref, () => props.form)
  
   ...

}
export default Form.create(React.forwardRef(FunctionForm))

When using it

// App.js 

const formRef = React.useRef()

<FunctionForm  wrappedComponentRef={formRef}  />