Assigning default value to Autocomplete in Material UI 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.

MrMoeinM · Accepted Answer · 2023-07-19 12:39:51Z

36

your defaultValue of <AutoComplete /> should have the same format as your options, the getOptionLabel() 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" />}
/>

edited Jul 19, 2023 at 12:39

MrMoeinM

2,4081 gold badge14 silver badges17 bronze badges

answered Apr 14, 2020 at 17:53

Yone

9761 gold badge8 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Etika49 Over a year ago

OK. I understand what you mean. Thank you. This works as intended!

Rupak Over a year ago

and ho do i get the default value?

Yone Over a year ago

well, here you should make your own choice

Bryan Lumbantobing Over a year ago

what if I don't have the options yet? because the options will come asynchronously from the API request made when typing in autocomplete

Yone Over a year ago

@BryanLumbantobing checkout mui.com/material-ui/react-autocomplete/#asynchronous-requests

Dekel · Accepted Answer · 2020-04-14 18:06:00Z

6

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" />}
/>

edited Apr 14, 2020 at 18:06

answered Apr 14, 2020 at 17:39

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

7 Comments

Etika49 Over a year ago

This does assign the value but it is still not rendering it on the screen. It still initially displaying the label.

Dekel Over a year ago

What do you mean by "still displaying the label"? Please create a working example in codesandbox.io

Etika49 Over a year ago

I want it to look like this initially: imgur.com/a/0v15c0C . This is what it defaults to : imgur.com/D6TINi4

Dekel Over a year ago

If you want the value of 12 Angry Men to be available you should have it in the options, and it's not there currently. You can add it inside, and than use it inside the defaultValue.

Dekel Over a year ago

Not sure if you even checked my solution, it's actually exactly the same code.

|

Bambier · Accepted Answer · 2022-02-08 08:04:06Z

1

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}
                            
    />

answered Feb 8, 2022 at 8:04

Bambier

93115 silver badges22 bronze badges

Collectives™ on Stack Overflow

Assigning default value to Autocomplete in Material UI and React.js

3 Answers 3

5 Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related