Am working on an application which has some input fields on a row, On the side there is an addition icon whereby when the user clicks an additional row is added dynamically containing the input fields. I want to generate the ids of the proceeding inputs field dynamically when the user clicks on the add button icon. Am doing this in react. Thanks
{Array.from(Array(counter)).map(() => (
<div className="row">
<div className="col-sm-2">
<Box sx={{ minWidth: 120 }}>
<FormControl fullWidth>
<InputLabel id="demo-select-small">Sales Type</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
// value={salesTypex || ""}
// key={c}
label="Age"
sx={{ minHeight: 40 }}
// fullWidth
onChange={handleOnChange}
// onChange={(e) => handleOnChange(e.target.value)}
>
<MenuItem value="1">Product</MenuItem>
<MenuItem value="2">Company Sales</MenuItem>
<MenuItem value="3">Custom Service</MenuItem>
</Select>
</FormControl>
</Box>
</div>
<div className="col-sm-2">
<Box sx={{ minWidth: 120 }}>
<FormControl fullWidth>
<TextField
id="outlined-error-helper-text"
label="First Name"
size="small"
// defaultValue="Hello World"
// helperText="Incorrect entry."
/>
</FormControl>
</Box>
</div>
</div>
))}