Что такое getOptionSelected и getOptionLabel в пользовательском интерфейсе материала с примером?

Question

Я просматривал документацию Mui, в разделе компонентов Autocomplete я получил два props, getOptionLabel и getOptionSelected, определение которых я получил, но не понял его должным образом. Так что будет здорово, если кто-нибудь сможет дать мне правильное определение простым способом с помощью примера

Answer 1

getOptionLabel используется для отображения текста в раскрывающемся списке

EX: массив автозаполнения

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

<Autocomplete
  id="combo-box-demo"
  options={top100Films}
  getOptionLabel={(option) => option.year.toString()} // in the dropdown the option text will be year,if we use like option.title then it will show the title of the movie in dropdown
......

getOptionSelected используется для определения выбранного значения данного массива

<Autocomplete
  id="combo-box-demo"
  options={top100Films}
  getOptionSelected={(option) => option.year === 1994}
....
//this will select all the option which has year as 1994 and make the background of that option darker

демо