I am creating a single page application with React and i have a shipment page where more than one product and product quantity will be add. I create some function for my case. My functions are working but i think the autocomplate displayed values are getting into the bug. How can i fix it?
Like example:
after:
My code:
const [productList, setProductList] = useState([{ name: "", quantity: 1}]);
const [product, setProduct] = useState([""]);//fetch ilie çekilen
const handleQuantityChange = (e, index) => {
const { name, value } = e.target;
const list = [...productList];
list[index][name] = value;
setProductList(list);
};
const handleLabelChange = (name, index, value) => {
const list = [...productList];
list[index][name] = value;
setProductList(list);
};
const handleServiceAdd = () => {
setProductList([...productList, { name: "", quantity: 0 }]);
};
return(
<div>
{productList.map((p, index) => (
<Autocomplete
isOptionEqualToValue={(option, value) => option.name === value.name}
value={p.name}
disablePortal
onChange={(e, newValue) => {
handleLabelChange("name", index, newValue);
}}
id="controllable-states-demo"
options={product.map((option) => option.name?option.name:"loading...")}
renderInput={(params) => (
<TextField
{...register('productNameV')}
error={errors.productNameV ? true : false}
helperText={errors.productNameV?.message}
{...params}
label={ "Product"+ (index + 1) }
InputProps={{
...params.InputProps,
endAdornment: (
<React.Fragment>
{loading ? <CircularProgress color="inherit" size={20} /> : null}
{params.InputProps.endAdornment}
</React.Fragment>
),
}}
/>
)}
/>
</div>
))}
<div>)