candidate.toLowerCase is not a function. (In 'candidate.toLowerCase()', 'candidate.toLowerCase' is undefined) Material UI

user_14383815 0
Viewed 4404

I am using AutoComplete API of material UI. there is an object of top100Films which contains the title and year of movies. My autocomplete works fine if i search with top100Film.title as shown in code

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

But if i want to search the movies with top100Films.year then i get an error message

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

candidate.toLowerCase is not a function. (In 'candidate.toLowerCase()', 'candidate.toLowerCase' is undefined)

How can i use any other data field except .title

the code is in Link

material-ui reactjs
2 Answers

getOptionLabel should return string while top100Films.year returns a number. change the getOptionLabel as below and it'll work fine:

  getOptionLabel={(option) => option.year.toString()}

sandbox

user_117669470
user_107271570
Related