How Can I Add Unique Keys To React/mui Autocomplete Component?

I'm trying to create a Material-UI Autocomplete component that essentially just displays search results to the user. Some of the options' names will be duplicates, but they will al

Solution 1:

You can define your own renderOption that can return the list item with a correct key value. Your code complains about the duplicated keys because by default, Autocompleteuses thegetOptionLabel(option) to retrieve the key:

<Autocomplete
  renderOption={(props, option) => {
    return (
      <li {...props} key={option.id}>
        {option.name}
      </li>
    );
  }}
  renderInput={(params) =><TextField {...params} label="Movie" />}
/>

If it still doesn't work, check your props order, you need to declare the key prop last, if you put it before the props provided by the callback:

<Boxcomponent='li'key={key} {...props}

Then it will be overridden by the props.key from MUI. It should be like this:

<Boxcomponent='li' {...props} key={key}

Live Demo