Dynamic dropdown values are not displaying correctly - reactjs

Question

I have two antd select fields in a row and a + icon to add another row with two dropdowns as shown in the image.
On click of the first dropdown value, related data should be displayed in dropdown2, and click on + icon it will add two more dropdowns in the second row and respectively and the requirement is the same, onlick of 2nd row first dropdown value. related values will be displayed in the 2nd row 2nd drop-down field.
Issue:
2nd drop-down values are always the same for both rows. When I select the 2nd-row first dropdown value, related values show in 2nd row 2nd dropdown but the same values reflect in the first row second dropdown.
Below my code snippet and I am using antd Form to achieve this. For single row drop-downs it works as expected, but when I add another row by clicking on + icon, an issue occurs. Is there any other approach to implement this?
The code snippet I have added may not work in some environments.
import React, { useRef, useEffect, useState } from "react";
import { Form, Select, Col, Row, Button, Checkbox } from "antd/lib";
import { PlusOutlined, MinusOutlined } from "#ant-design/icons";
const { Option } = Select;
const DropdownComponent = (props) => {
const addBtnRef = useRef(null);
const [dropDownOneData, setDropDownOneData] = useState([]);
const [dropDownTwoData, setDropDownTwoData] = useState([]);
const [dropDownOneValue, setDropDownOneValue] = useState("");
const dropDownOneTwoValues: [
[
{
dropDownOne: {
key: "test_t";
value: "test";
};
dropDownTwo: [
{
key: "key1";
value: "Value1";
},
{
key: "key2";
value: "Value2";
}
];
}
],
[
{
dropDownOne: {
key: "test_t1";
value: "test1";
};
dropDownTwo: [
{
key: "key3";
value: "Value3";
},
{
key: "key4";
value: "Value4";
}
];
}
]
];
useEffect(() => {
addBtnRef.current.click();
// set dropdownone values
const dropDownOneData = dropDownOneTwoValues?.map(
(searchField) => searchField[0].dropDownOne
);
setDropDownOneData(dropDownOneData);
}, []);
useEffect(() => {
// set related dropDownTwo values on selected dropdownOne value
const dropDownTwoValues = dropDownOneTwoValues
.flat()
.filter((values) => values.dropDownOne.key === dropDownOneValue)
.flatMap((value) => value.dropDownTwo);
setDropDownTwoData(dropDownTwoValues);
}, [dropDownOneValue]);
const handleDropDownOne = (value) => {
setDropDownOneValue(value);
};
function renderDropDownValues(options) {
return options.map((option) => {
if (option.key && option.value) {
return (
<Option
key={option.key}
value={option.key}
disabled={option.disabled}
>
{option.value}
</Option>
);
}
return (
<Option key={option} value={option}>
{option}
</Option>
);
});
}
return (
<>
<Row>
<Col>
<Form.List>
{(fields, { add, remove }) => {
{
console.log("fields...", fields);
}
return (
<div
className="border"
style={{
padding: "20px",
marginBottom: "25px",
marginTop: "-30px"
}}
>
{fields.map((value, index) => {
return (
<Row key={index} style={{ marginBottom: 8 }}>
<Col>
<Form.Item
rules={[
{ required: true, message: "Select a value" }
]}
name={value.Name}
>
<Select
key={index}
className="w-100"
showSearch={true}
optionFilterProp="children"
filterOption={(input, option) =>
option?.children
.toLowerCase()
.includes(input.toLowerCase())
}
placeholder="Select"
onChange={(value) => handleDropDownOne(value)}
value={dropDownOneValue}
>
{renderDropDownValues(dropDownOneData)}
</Select>
</Form.Item>
</Col>
<Col>
<Form.Item
rules={[
{ required: true, message: "Select a value" }
]}
name={value.name}
>
<Select
className="w-100"
showSearch={true}
optionFilterProp="children"
filterOption={(input, option) =>
option?.children
.toLowerCase()
.includes(input.toLowerCase())
}
placeholder="Select"
>
{renderDropDownValues(dropDownTwoData)}
</Select>
</Form.Item>
</Col>
</Row>
);
})}
<Row justify="end">
<Col>
<Form.Item>
<Button
ref={addBtnRef}
shape="circle"
size="small"
className="center"
data-testid="add-clause-btn"
icon={
<PlusOutlined
className="primary-color"
style={{ marginTop: "1px" }}
/>
}
onClick={() => {
add();
}}
/>
</Form.Item>
</Col>
</Row>
</div>
);
}}
</Form.List>
)
</Col>
</Row>
</>
);
};
export default DropdownComponent;

Answer 1

You need to have unique Form.Item name for every row.
Try this,
name={[index, value.Name]}
and provide a name for Form.List also, name={"something"}