suggest selected

[Adigezalov]

I have code:

import React from "react";
import ReactDOM from "react-dom";
import { YMaps, Map } from "react-yandex-maps";

import "./styles.css";

function App() {
  const loadSuggest = ymaps => {
    const suggestView = new ymaps.SuggestView("suggest");
  };
  return (
    <div className="App">
      <input type="text" className="form-control" id="suggest" />
      <YMaps>
        <Map
          onLoad={ymaps => loadSuggest(ymaps)}
          defaultState={{ center: [55.751574, 37.573856], zoom: 9 }}
          modules={["SuggestView"]}
        />
      </YMaps>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

How can I get the value of the selected suggest?

And the second question is, how can I style the dropdown suggest?

[mmarkelov]

@Adigezalov to get the value of selected suggest you can use select event:

  const loadSuggest = (ymaps) => {
    const suggestView = new ymaps.SuggestView("suggest");
    suggestView.events.add("select", (e) => {
      console.log(e.get("item"));
    });
  };

IDK about styling suggest, but you can try to do it with css:

ymaps[class*="search__suggest"] {
  // styles for dropdown container
}

ymaps[class*="suggest-item"] {
  // styles for dropdown item
}