city-input.js

({ changeCityInputValue, cityInputValue, selectCity, city }) => (
    <PlacesAutocomplete
      highlightFirstSuggestion
      value={cityInputValue}
      onChange={changeCityInputValue}
      onSelect={selectCity}
      searchOptions={{ types: ['(cities)']}}
      onError={() => changeCityInputValue('')}
    >
      {({ getInputProps, suggestions, getSuggestionItemProps, loading, ...rest }) => (
        <Paper style={inputContainerStyle}>
          <TextField
            {...getInputProps({
              placeholder: 'Search City ...',
            })}
          />
          <List>
            {suggestions.map((suggestion) => (
              <ListItem {...getSuggestionItemProps(suggestion)} key={suggestion.description} button>
                <ListItemText primary={suggestion.description}/>
              </ListItem>
            ))}
          </List>
        </Paper>
      )}
    </PlacesAutocomplete>
  )