I have a dynamic form like this =>
Please Take a look at my form
I'm using Material UI autocomplete and textfield and Ant Design
[
Dynamic Form].
I'm having a issues in collecting data and updating the state dynamically and I have no idea what to do.
my state have a static object(inside the commission property) and i want also every new field to append inside commission property for example i want to achieve
commission: [
{commissionFor: 'Invoicng',commissionPercentage: '20'},
{commissionFor: 'New Field',commissionPercentage: '40'},
{commissionFor: 'Another New Field',commissionPercentage: '70'},
{commissionFor: 'Another New Field',commissionPercentage: '80'},
and ...
]
So we shouldn't delete anything from commission property. we need to clone it.
this is my state
const [data,setData] = useState({
commission: [{commissionFor: '',commissionPercentage: ''}]
})
This is my static form
<pre> <Autocomplete
onChange={(e, value) =>
setData((data) => ({
...data,
commission: data.commission.map((c, index) =>
index === 0
? { ...c, commissionFor: value || e.target.value }
: c
),
}))
}
renderInput={(params) => <TextField {...params} label="Commission For" />}
/>
</div>
<FormControl>
<InputLabel>Percentage</InputLabel>
<OutlinedInput
value={input}
onInput={(e) => setInput(e.target.value)}
onBlur={(e, value) =>
setData((data) => ({
...data,
commission: data.commission.map((c, index) =>
index === 0
? { ...c, commissionPercentage: value || e.target.value }
: c
),
}))
}
/>
</FormControl>
<Button
type="dashed"
onClick={add}
>
Add New Field
</Button>
On Every Button Click a AutoComplete and a Textfield should appear.
This is my Dynamic Form where the handling dynamic state changes should happen. but i have no idea how to it.
Please change the onChange event to your implementation.
<Form.List name="commision">
{(fields, { add, remove }, { errors }) => (
<>
{fields.map((name, index) => (
<Row key={index}>
<Autocomplete
onChange={???????}
renderInput={(params) => (
<TextField {...params} label="CommissionFor />
)}
/>
<FormControl>
<InputLabel>Percent</InputLabel>
<OutlinedInput
value={data[`commission`] || ""}
onChange={???????????}
</FormControl>
))}
</>
Sorry for long code but this is driving me crazy. I hope someone help me. I Will really appreciate it
What I have tried:
i have tried a few things but all my implomention didn't work .
i really don't know what to do. i really need help and this is very important to me i'm junior and this is my first project