skip to Main Content

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


  1. Chosen as BEST ANSWER

    missing value for Autocomplete.


  2. You should try to do setFilms(films[0]), that should work

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search