0
I have a component Autocomplete
of the Material UI where the user searches the values based on an array of products that comes from an API. The component is like this, where products
is the array, setPointsProduct
and setItem
is my state. :
<Autocomplete
value={item}
id="autocomplete"
onChange={(event, newValue) => {
if (newValue) {
const values = newValue.split('-');
setPointsProduct(values[1]);
setItem(values[0]);
document.getElementById('quantity').focus();
} else {
toast.error('Selecione um produto');
}
}}
options={products.map(
product => `${product.name} - ${product.points}`
)}
renderInput={params => (
<TextField
{...params}
label="Produtos"
required
className={classes.points}
autoFocus
variant="outlined"
/>
)}
/>
The component works but every time I open the console this error appears:
useAutocomplete.js:249 Material-UI: The value provided to Autocomplete is invalid.
None of the options match with `""`.
You can use the `getOptionSelected` prop to customize the equality test.
How can I withdraw this error? I am doing something wrong in the component?