ErrorPro / react-google-autocomplete

React components for google places API.
MIT License
473 stars 114 forks source link

InvalidValueError: setTypes: not an Array #142

Closed humayunkabir closed 2 years ago

humayunkabir commented 2 years ago

Here is my AutoCompleteAddress component:

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.

Any solution for this? Thanks in advance.

ErrorPro commented 2 years ago

@humayunkabir Hello, please refer to the docs regarding setTypes, it accepts an array of strings, in your case types: ['cities']