Click here to Skip to main content
15,880,392 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
JavaScript
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
JavaScript
const [data,setData] = useState({
commission: [{commissionFor: '',commissionPercentage: ''}]
})


This is my static form
JavaScript
<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.

JavaScript
<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
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900