i have a state like this
const [data,setData] = useState({
city: "",
address: "",
zipCode: "",
phoneNum: "",
commission: [{ commissionFor: "Invocing", commissionPercentage: "40" }],
and i have a dynamic form which will appear if user click on ```Add`` button
<Form onFinish={onFinish}>
<Form.List name="commision">
{(fields, { add, remove }, { errors }) => (
<>
{fields.map((name, index) => (
<Row key={index}>
<Autocomplete
onChange={(e, value) =>
setData((data) => ({
...data,
[`${dataName}${index + 1}`]: e.target.value,
}))
}
/>
<FormControl>
<InputLabel>Percentage</InputLabel>
<OutlinedInput
value={data[`${dataValue}${index + 1}`] || ""}
onChange={(e) =>
setData((data) => ({
...data,
[`${dataValue}${index + 1}`]: e.target.value,
}))
}
startAdornment={
<InputAdornment position="start">
{insideIcon}
</InputAdornment>
}
label="Percentage"
/>
</FormControl>
</Row>
))}
<Form.Item>
i want when the user fill the information , my commission object change like this
commission: [{ commissionFor: "Invocing", commissionPercentage: "40" },{ commissionFor: "This is new Input", commissionPercentage: "80" }],
how can i achieve this ? i will appreciate some help
You can do it as a function
put it on change on every input
onChange={handleChange}
Create this function
const handleChange = (event) => {
setData({
...data,
commission: {...data.comission, [`${dataValue}${index + 1}`] : event.currentTarget.value} })
}