how can i keep track of "Ant Design- Dynamic Form Item" and store all values in a single object state?

Question

So I'm using Ant Design Dynamic Form Item and you can create as many as input field you want.

the question is how can I store all of the values (static field and new fields) in a single array of objects inside my state?

Please take a Look at my component

if you click add it will create another Autocomplete and a inputfield. and you enter data

for example I want an array of object like this

[{commisionFor: 'Invoicing' , perctange: 10},{newcondition: 'something' , percentage: 32},{} , {} , {] , and etc ]

I wanna achieve this. how can i do this ? I will appreciate your help

PS : I'm not typing my code here because it's to complex and I don't even know what i did. Take look at this Ant Design Dynamic Form Item sandbox

Ant Dynamic Form Item CodeSandBox

Answer 1

you can use onChange event to store all values separately.

const [values, setValues] = useState({})

const onChangeHandler = (name, value) =>{
   let data = values;
    data[name] = value;

   setValues(data)
}

and in your multiple input field, create unique name for each input field.

 fields.map((name, index) => {
    <Input placeholder={name} name={name} onChange={(e) => onChangeHandler(name, e.target.value)} />
})

use your own attribute for naming fields or just use the index value.