CODEWITHSUNDEEP
javascriptreactjsantd
One Chowdhury
One Chowdhury

Reputation: 73

Ant design form issue

I am trying to build a table that is editable using ant design. going through exactly by documentation of ant design, there occurs an error.
Form.useForm() is not a function

This is my code: 

import React, { Component } from "react"
import { Table, Input, Button, Form } from "antd"

const EditableContext = React.createContext()

const EditableRow = ({ index, ...props }) => {
  const [form] = Form.useForm()
  return (
    <Form form={form} component={false}>
      <EditableContext.Provider value={form}>
        <tr {...props} />
      </EditableContext.Provider>
    </Form>
  )
}

...

what I guess the problem is arising here: const [form] = Form.useForm()

What might be the solution?
N.B. my ant design version is '^3.26.12'

Upvotes: 2

Views: 2956

Answers (3)

mushroom_lb
mushroom_lb

Reputation: 137

upgrade v3 to v4, and v4 form is beautiful enter image description here

Upvotes: 0

Anglesvar
Anglesvar

Reputation: 1154

Try updating you AntD version to v4.x or use documentation for AntD v3.x. AntD v4.x uses const [form] = Form.useForm() whereas AntD v3.x uses Form.create({ name: 'form-name' }) to create form. This is where you have to change.

Upvotes: 0

hiddenuser.2524
hiddenuser.2524

Reputation: 4988

You are using AntD v3 and using the docs for v4. You should use the docs for v3 for this: https://3x.ant.design/docs/react/introduce

This is where you find info about the form: https://3x.ant.design/components/form/

https://ant.design/components/form/v3 - for migrating from v3 to v4 (if you want to use Form.useForm)

Upvotes: 3

Related Questions