I need to have default value in my autocomplete.
I get the select options from database, like this:
let films = await db.collection("films").find().toArray();
Here’s the data returned:
[
0: { title: 'The Shawshank Redemption', year: 1994, isDefault: true },
1: { title: 'The Godfather', year: 1972, isDefault: false },
2: { title: 'The Godfather: Part II', year: 1974, isDefault: false },
3: { title: 'The Dark Knight', year: 2008, isDefault: false }
length: 4
Prototype:....
]
I want the autocomplete shows the data which isDefault: true
. I tried the simplest way:
<Autocomplete
id="id"
options={films}
getOptionLabel={option => option.title}
defaultValue={films[0]}
renderInput={params => (
<TextField {...params} variant="outlined" />
)}
/>
It still show nothing in the text field.
But if I hardcoded the options like:
let [films, setFilms] = useState[{
{ title: 'The Shawshank Redemption', year: 1994, isDefault: true },
{ title: 'The Godfather', year: 1972, isDefault: false },
...}];
That’s work, the autocomplete is showing the default value.
I don’t know what’s wrong with my data. Any ideas?
2
Answers
missing
value
for Autocomplete.You should try to do setFilms(films[0]), that should work