how to change one input field inside map in react?

Question

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

pepinillo6969 · Accepted Answer · 2022-06-16 10:02:39Z

1

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

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

answered Jun 16, 2022 at 10:02

pepinillo6969

5636 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to change one input field inside map in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related