reactjstypescriptreact-hooksantd

Looping through an AntDesign Row/Form; when an option is selected from dropdown, all of the other Rows Values get changed


I have a Form from Ant Design and inside the form I am looping through part of it to create multiple Rows, but when one value gets changed in a dropdown list - all the other labels. are changed in each row. The actual value isn't saved into seriesList State, it is just showing the same label in the dropdown.


Solution

  • <Form.Item name="color". I'm not wrong this is causing the issue. Since you have same name for field in each row, when you change any one it will change all the others. When you wrap any field with <Form.Item> and add name attribute, antd Form controls the field. In order to fix it, make sure you have different name for each field i.e. name={`color_${index}`} or if you are controlling each field value and handling its onChange function then just remove name from Form.Item. Hope this will resolve your issue