I’m trying to view the fetched data on MUI Autocomplete, but I get this error I don’t why, the stat is fetched from MongoDB and I’m just trying to view the name of the category as an option.
The Code:
JavaScript
x
34
34
1
export default function ChooseCat() {
2
3
const [categories, setCats] = useState([]);
4
5
useEffect(() => {
6
const getCats = async () => {
7
const res = await axios.get("/categories");
8
setCats(res.data);
9
};
10
getCats();
11
}, []);
12
console.log(categories)
13
14
return(
15
<div>
16
<Autocomplete
17
multiple
18
id="tags-standard"
19
options={categories}
20
getOptionLabel={(c) => c.name}
21
defaultValue={[categories[3]]}
22
renderInput={(params) => (
23
<TextField
24
{params}
25
variant="standard"
26
label="Multiple values"
27
placeholder="Favorites"
28
/>
29
)}
30
/>
31
</div>
32
)
33
}
34
This is how the data is showing in Mongodb
Advertisement
Answer
So I added this and it worked getOptionLabel={option => (option ? option.name : "")}