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
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.