I have 3 input fields but changing one is affecting every input field. I tried adding keys to the fields as well.

Code:

const App = () => {
  const List = [
    ["1", "2"],
    ["3", "4"],
    ["10 ", "20"]
  ];

  return (
    <>
      <Form layout="vertical" requiredMark={false}>
        {List.map((l, index) => (
          <div style={{ display: "flex", alignItems: "center" }} key={index}>
            <Form.Item name="startRange">
              <InputNumber
                defaultValue={l[0]}
                style={{
                  width: "70px",
                  height: "43px",
                  borderRadius: "4.5px",
                  border: "1px solid #CBCBCB"
                }}
                min={1}
                max={100}
              />
            </Form.Item>
            <p style={{ marginLeft: "15px", marginRight: "12px" }}>To</p>
            <Form.Item name="endRange">
              <InputNumber
                defaultValue={l[1]}
                style={{
                  width: "70px",
                  height: "43px",
                  borderRadius: "4.5px",
                  border: "1px solid #CBCBCB"
                }}
                min={1}
                max={100}
              />
            </Form.Item>
          </div>
        ))}
      </Form>
    </>
  );
};

Codesandbox link: https://codesandbox.io/s/basic-antd-4-16-9-forked-p7r5wf?file=/index.js

CodePudding user response：

You need to set your name unique for each input item. For example:

<Form.Item name={"startRange" index}> <Form.Item name={"endRange" index}>