Assigning default value to Autocomplete in MaterialUI and React.js

Question

I would like to display default value to my Autocomplete TextField component from Material UI in React.js. A pre-populated value that is automatically loaded from the users' profile and that can be changed with another one from the list.

Here is my code:

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

export const ComboBox =() => {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Combo box" defaultValue="The Godfather" variant="outlined" />}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
  { title: 'The Dark Knight', year: 2008 } 
]

I only see the input field with the label on it. defaultValue is listed as an API of both TextField and Autocomplete and I also tried to move it directly under Autocomplete. Still not working.

Answer 1

your defaultValue of <AutoComplete /> should have the same format as your options, the getOptionLable() is used to form the label even from your defaultValue.

in your code title property of the string is undefined, so nothing is shown.

this code should work fine:

<Autocomplete
    id="combo-box-demo"
    options={top100Films}
    defaultValue={{ title: "The Godfather", year: 1972 }}
    getOptionLabel={(option) => option.title}
    style={{ width: 300 }}
    renderInput={(params) => <TextField {...params} label="Combo box" defaultValue="The Godfather" variant="outlined" />}
/>

Answer 2

You can use the defaultValue option like this:

<Autocomplete
    id="combo-box-demo"
    options={top100Films}
    defaultValue={ top100Films[0] }
    getOptionLabel={(option) => option.title}
    style={{ width: 300 }}
    renderInput={(params) => <TextField {...params} label="Combo box" defaultValue="The Godfather" variant="outlined" />}
/>

Answer 3

If you use multiple so you should set defaultValue in list like blow

<Autocomplete multiple id="tags-standard" options={categoryList}
    defaultValue={[{ title: "cat1", id: 1 }, { title: "cat2", id: 2 }]}

    getOptionLabel={(option) => option.title}
    renderInput={(params) => (
    <TextField {...params} variant="standard" label="Category" />
    )}
    onChange={handleCategory}
                            
    />