How to display given json list of cities in autocomplete?

Question

JavaScript

Here is a link to the sanbox https://codesandbox.io/s/fristyr-react-gx25s
So.
Import json list. I map it.
import cities from 'cities.json';

const citiesList = cities;

const citiesListNames = citiesList.map( item => {
  return item.name 
} )

console.log(citiesListNames)

The console gives a list of country names, like everything is ok.
https://monosnap.com/file/BVx9Hbwb6d8PbXEmeKBUFzsg...
For autocomplete I used this library https://github.com/JedWatson/react-select which is quite simple and does what I need.
It uses an array of objects to display the dropdown select.

const options = [
  { value: 'Amsterdam', label: 'Amsterdam' },
  { value: 'London', label: 'London' },
  { value: 'Moscow', label: 'Moscow' },
];

The component itself is here:

<Select
            value={selectedOption}
            onChange={this.handleChange}
            options={options}
            name="city"
            className={styles.weather_city_select}
          />

I'm having a little trouble passing a mapped list of countries.
I changed to props, options={options}const citiesListNamesbut the application freezes from such an amount of data.
So. What do I need to do to get the action I'm expecting?
Thanks in advance.

Answer 1

const citiesListNames = citiesList.map( item => {
  return item.name 
} )

Cool. It is not clear how, after such a manipulation, to distinguish Paris in Ile-de-France from Paris in Ontario. Or Moscow of the Moscow region from Moscow of Pennsylvania.
How to directly limit the number of displayed records - something in the documentation did not find such an opportunity. You can try to wrap this up .
Well, in general, uploading one hundred thousand records to the client is not very accepted. In any case, the user will not be able to perceive so much information at one time.