CODEWITHSUNDEEP
javascriptarraysreactjsreact-hooksantd
Pedi
Pedi

Reputation: 11

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

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

Upvotes: 0

Views: 1360

Answers (1)

Nahid Salekin
Nahid Salekin

Reputation: 126

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.

Upvotes: 0

Related Questions