dynamic_form_list.js

import React from "react";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { Form, Divider, Button, Select, Input } from "antd";

function DynamicField(props) {
  return (
    <Form.List name="fields">
      {(fields, { add }) => {
        return (
          <div>
            {fields.map((field, index) => (
              <div key={field.key}>
                <Divider>Field {index + 1}</Divider>
                <Form.Item name={[index, "name"]} label="Name" rules={[{ required: true }]}>
                  <Input placeholder="field name" />
                </Form.Item>
                <Form.Item label="Type" name={[index, "type"]} rules={[{ required: true }]}>
                  <Select>
                    <Select.Option value="string">String</Select.Option>
                    <Select.Option value="dropdown">Dropdown</Select.Option>
                    <Select.Option value="number">Number</Select.Option>
                  </Select>
                </Form.Item>
                <Form.Item name={[index, "options"]} label="Options">
                  <Input placeholder="option 1, option 2, option 3" />
                </Form.Item>
              </div>
            ))}
            <Divider />
            <Form.Item>
              <Button type="dashed" onClick={() => add()} style={{ width: "60%" }}>
                <PlusOutlined /> Add field
              </Button>
            </Form.Item>
          </div>
        );
      }}
    </Form.List>
  );
}

export default function App() {
  const [form] = Form.useForm();

  function handleFinish(values) {
    console.log("VALUES", values);
  }
  return (
    <div className="App">
      <h1>AntD Dynamic Form Example</h1>
      <Form form={form} onFinish={handleFinish}>
        <DynamicField />
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}