Autocomplete component returns undefined error in React app

Issue

I am trying to insert an autocomplete component in my react app and I get the error:

The `getOptionLabel` method of Autocomplete returned undefined instead of a string for "Score".

whenever I try to select an option.

Here is the autocomplete code:

<Autocomplete
  id="id"
  options={["Score","Name"]}
  getOptionLabel={option=> option.label}
  style={{width:300}}
  renderInput={params => (
    <TextField {...params} label="Sort By" variant="outlined" />
  )}
/>

Solution

You are passing options as an array of strings (["Score","Name"]) Then passing getOptionLabel as option => option.label, but your options are plain strings.

Either try removing getOptionLabel prop, or update items in your options array as objects with label property.

Answered By - T J