Как в проп «value» компонента Material-ui Autocomplete передавать только value?

Question

[4ch23]

Постоянно сталкиваюсь с одной и той же проблемой, когда плагины для работы с выпадающими списками (комбобоксами) принимают в пропы "value" и "defaultValue" не конкретное value, а объект {label, value}. Может я что-то упускаю и так делать "правильно", а я некорректно готовлю бэк ? Если всё же мои ожидания логичны - просьба подсказать npm пакеты-обёртки над Material-UI умеющие обрабатывать оба варианта.

Пример: С бэка приходит объект пользователя

{id: 1, role_id: 2, name: "user"} (Допустим role_id=2 это "admin")

Так вот для того что бы на странице отобразилось "admin" нужно писать так:

<Autocomplete value={{label: "admin", value: 2}} options=[{label: "superadmin", value: 1}, {label: "admin", value: 2}] />

А хотелось бы:

<Autocomplete value={2} options=[{label: "superadmin", value: 1}, {label: "admin", value: 2}] />

p.s. написать одну обёртку для компонента не проблема, но есть куча сторонних библиотек, работающих именно с тем вариантом Autocomplete, что есть в материале, например тот же React-final-form. Здесь я бы скорее хотел получить осознание того, почему делают обязательной передачу label.
Спасибо!

Answer 1

[Gimir]

Ну так он работает значит, в чем сложность то? Так в компоненте достается информация из options. Если библиотека не предоставляет возможности переписать дефолтное поведение (как в react-autocomplete например, где нужно прописывать каждое действие вручную для своих данных, типа getOptions, getOptionFromOptions и т.д.), то оставьте это как есть.

Если вам нужна обертка для контроля селекта, можно как вариант использовать react-hook-form, у него есть компонент Controller, который позволяет обернуть селект из MaterialUI, плюс будет меньше рендеров.
Или сделать контролируемый селект.

Comments

[4ch23]

спасибо за ответ. Сложность в том, что label опшена не известен в момент рендера, только его value. Для того что бы получить label нужно создавать мапу по options или в плохом варианте запускать цикл .find() по ним, а когда таких селектов несколько это вызывает нагромождение кода.

[Gimir]

Я так понимаю у вас сервер присылает числовые значения, которые интерпретируются как типа 1 - админ, 2 - юзер и т.д.? Я бы в таком случае создал бы функцию через которую бы пропускал ответ от сервера. В любом случае нужно это привести к формату, который понимает компонент.