Closed humayunkabir closed 2 years ago
Here is my AutoCompleteAddress component:
AutoCompleteAddress
import { usePlacesWidget } from 'react-google-autocomplete'; type AddressKey = | 'street_number' | 'route' | 'locality' | 'administrative_area_level_1' | 'administrative_area_level_2' | 'country' | 'postal_code'; type Address = { [key in AddressKey]: string; } & { name: string; latitude: string; longitude: string; photos: string[]; place_id: string; formatted_address: string; }; const addressComponents = { street_number: 'short_name', route: 'long_name', locality: 'long_name', administrative_area_level_1: 'short_name', administrative_area_level_2: 'short_name', country: 'long_name', postal_code: 'short_name', }; interface AutoCompleteAddressProps { onPlaceSelected: (address: Address) => void; } const AutoCompleteAddress = ({ onPlaceSelected, ...rest }: AutoCompleteAddressProps) => { const selectAddress = (place: any) => { const address = {} as Address; if (place) { // Get each component of the address from the place details for (let i = 0; i < place.address_components.length; i += 1) { const addressKey: AddressKey = place.address_components[i].types[0]; if (addressComponents[addressKey]) { address[addressKey] = place.address_components[i][addressComponents[addressKey]]; } } if (place.geometry) { address.latitude = place.geometry.location.lat(); address.longitude = place.geometry.location.lng(); } // additional fields available in google places results if (place.name) { address.name = place.name; } if (place.photos) { address.photos = place.photos; } if (place.place_id) { address.place_id = place.place_id; } if (place.formatted_address) { address.formatted_address = place.formatted_address; } } onPlaceSelected(address); }; const { ref } = usePlacesWidget<HTMLInputElement>({ apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY, onPlaceSelected: selectAddress, options: { types: 'cities', fields: [ 'address_components', 'geometry.location', 'place_id', 'formatted_address', ], }, }); return <input ref={ref} {...rest} />; }; export default AutoCompleteAddress;
And I am using it like this
<AutoCompleteAddress name='address' placeholder='Enter your address' onPlaceSelected={handlePlaceSelected} />
The problem is, I am getting this error InvalidValueError: setTypes: not an Array, and the screen went frozen, can't do anything after this.
InvalidValueError: setTypes: not an Array
Any solution for this? Thanks in advance.
@humayunkabir Hello, please refer to the docs regarding setTypes, it accepts an array of strings, in your case types: ['cities']
types: ['cities']
Here is my
AutoCompleteAddress
component:And I am using it like this
The problem is, I am getting this error
InvalidValueError: setTypes: not an Array
, and the screen went frozen, can't do anything after this.Any solution for this? Thanks in advance.