Способ отображения выбранной строки с адресом about react-dadata HOT 3 OPEN

Добрый день!

Да, вы можете в пропсах компонента прокинуть коллбек renderOption - функция, которая принимает один аргумент - объект подсказки, и должна вернуть любой JSX, который будет отображаться

import React, { useRef } from 'react';
import { AddressSuggestions } from 'react-dadata';

// Как то так, можно возвращать любую верстку, например с расширенными данными, как угодно
<AddressSuggestions
  renderOption={(suggestion) => (<span>{suggestion.data.city}</span>)}
/>

Единственный момент, что в таком случае не будет доступно выделение совпадений.
Вообще можно воспользоваться пакетом react-words-highlight, который внутренне используется для этого, но в настоящий момент в колбеке нет информации какой запрос вообще сейчас введен в поле. Но - можно его хранить в стейте, сохраняя его в inputProps={{ onChange: (event) => { /** Тут сохраняем значение из поля ввода */} }}

from react-dadata.

Я выразился неточно. Опции в выпадающем списке выглядят хорошо. Но необходимо убрать лишнее в выбранном элементе, когда Select уже свёрнут. Когда опция выбрана, хотелось бы видеть только название города.

from react-dadata.

Тогда сложнее, просто менять значение в поле вводе не очень хорошая идея поскольку при редактировании значения его текст используется для подгрузки вариантов
Как вариант решения - хранить в стейте выбранную подсказку, подписаться на события инпута onBlur и onFocus.
При onBlur - используя метод setInputValue ставим туда нужное обрезанное значение. При onFocus - возвращаем полное. Это чисто мысли вслух, но вроде бы может сработать в вашем варианте.

А саму подсказку нужно полную с адресом? Не подойдет ограничение области поиска от самой DaData?

from react-dadata.