value prop does not show data in Input in Ant Design

Question

I have a Ant Design form and Data is being fetched from an API and I want to show that data in that form.I am setting the value prop in ant design <Input/> field like <Input value = {value.project_name}/> but the input field is empty.

The value.project_name is coming from an API.

Why is this happening I have read the docs and it says value is the input content value and it must be a string, all these conditions satisfy in my case then why am I getting this unexpected behaviour.

Question How am I supposed to fill the form input fields with value.project_name which should be a controlled component in Ant Design. Please Help what am I doing wrong !

EditProjectForm.tsx

import { Form, Input, Button, Select, Space, Card} from "antd";
import { SendOutlined } from "@ant-design/icons";
import { useState } from "react";
const { TextArea } = Input;

const EditProject = ({fetchedData,submitEditFormData}) => {
  const [form] = Form.useForm()
  // EXTRACTING FIELDS FROM FETCHED DATA 
  const data = {
    user_ID: fetchedData.result[0].user_ID,
    project_ID: fetchedData.result[0].project_ID,
    project_name: fetchedData.result[0].project_name,
    project_Description: fetchedData.result[0].project_Description,
    project_Name_space: fetchedData.result[0].project_Name_space,
    project_language: fetchedData.result[0].project_language
  }
  const [value,setValue] = useState(data)

    // ON FORM SUBMIT 
    const onFinish = (values) => {
      // CONSTRUCT EDITED VALUES OBJECT
        const editedValues = {
          user_ID: data.user_ID,
          project_ID: data.project_ID,
          project_name: values.project_name,
          project_Description: values.project_Description,
          project_Name_space: values.project_Name_space,
          project_language: values.project_language
        }
        console.log("Form Edited",editedValues)
        // API CALL FUNCTION
        submitEditFormData(editedValues)
        form.resetFields()
    }
    console.log(data)

    return (
      <>
        <Card className="csi-project-card-0934">
          {/* HEADING TITLE */}
          <h1 className="csi-project-card-heading">Edit Project</h1>
          <Form
            form={form}
            labelCol={{ span: 7 }}
            wrapperCol={{ span: 10 }}
            layout="horizontal"
            colon={true}
            onFinish={onFinish}
            size="large"
          >
            <Form.Item
              label="Project Name"
              name="project_name"
              className="csi-ant-form-item"
              rules={[
                { required: true, message: "Project Name Cannot be Empty!" },
              ]}
            >
              <Input value = {value.project_name} onChange = {(e) => setValue(e.target.value)}/>
            </Form.Item>

            <Form.Item
              label="Project Description"
              name="project_Description"
              className="csi-ant-form-item"
              rules={[
                {
                  required: true,
                  message: "Project Description Cannot be Empty!",
                },
              ]}
            >
              <TextArea rows={4}/>
            </Form.Item>

            <Form.Item
              label="Project NameSpace"
              name="project_Name_space"
              className="csi-ant-form-item"
            >
              <Input disabled />
            </Form.Item>

            <Form.Item
              label="Select Language"
              name="project_language"
              className="csi-ant-form-item"
              rules={[{ required: true, message: "Language Cannot be Empty!" }]}
            >
              <Select>
                <Select.Option value="en">en</Select.Option>
              </Select>
            </Form.Item>

            <Form.Item className="csi-ant-form-item">
              <Space style={{ marginLeft: "35vw" }}>
                <Button
                  key="submit"
                  type="primary"
                  htmlType="submit"
                  shape="round"
                >
                  Save Changes <SendOutlined />
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Card>
      </>
    );
}
export default EditProject

score 0 · Answer 1 · answered Dec 04 '21 at 13:33

0

you should use initalValues in Form component. Here is details how to use ant design form initialValue

answered Dec 04 '21 at 13:33

Artem Reva

13
4

score 0 · Accepted Answer · answered Dec 06 '21 at 09:43

I referred the docs and the solution was to use fields in <Form> tag.

The only code that I added is

<Form
            form={form}
            labelCol={{ span: 7 }}
            wrapperCol={{ span: 10 }}
            layout="horizontal"
            colon={true}
            onFinish={onFinish}
            size="large"
            fields={[
              {
                name: ["project_name"],
                value: data.project_name,
              },
              {
                name: ["project_Description"],
                value: data.project_Description
              },
              {
                name: ["project_Name_space"],
                value: data.project_Name_space
              },
              {
                name:["project_language"],
                value:data.project_language
              }
            ]}
          >

value prop does not show data in Input in Ant Design

2 Answers2