Warning: Each child in a list should have a unique "key" prop.

Getting a Warning: Each child in a list should have a unique "key" prop. error when using this library inside a React Typescript application.

To reproduce:

• Inside a react with typescript app, initialize GooglePlacesAutocomplete with most basic configurations
• Start typing the ABCs, around 5-10 characters, this warning floods the console.

I probably could fix it and make a PR, but I thought I should submit the issue first.

[bencehornak]

I think the problem is on Google’s side. Sometimes their API omits the id from the returning JSON for no reason 😬

For example, I intercepted this URL in the DevConsole:

https://maps.googleapis.com/maps/api/place/js/AutocompletionService.GetPredictionsJson?1sab&4sde-DE&7scountry%3AHU&9saddress&15e3&21m1&2e1&callback=_xdc_._8umyg&key=<My API KEY>&token=93086

If I fetch it repeatedly, sometimes id is included, sometimes it’s not 😒

Good response:

/**/_xdc_._8umyg && _xdc_._8umyg( {
   "predictions" : [
      {
         "description" : "Budapest, Abonyi utca, Ungarn",
         "id" : "5695d25a61ef2c2d780f2ae58e71fdde88c1c643", // here we have the id
         "matched_substrings" : [
            {
               "length" : 2,
               "offset" : 10
            }
         ],
         "place_id" : "Eh1CdWRhcGVzdCwgQWJvbnlpIHV0Y2EsIFVuZ2FybiIuKiwKFAoSCcNfVy6H3EFHEZVUoNFY40HvEhQKEgnJz9TRNMNBRxFgER4MKcQABA",
         "reference" : "Eh1CdWRhcGVzdCwgQWJvbnlpIHV0Y2EsIFVuZ2FybiIuKiwKFAoSCcNfVy6H3EFHEZVUoNFY40HvEhQKEgnJz9TRNMNBRxFgER4MKcQABA",
         "structured_formatting" : {
            "main_text" : "Abonyi utca",
            "main_text_matched_substrings" : [
               {
                  "length" : 2,
                  "offset" : 0
               }
            ],
            "secondary_text" : "Budapest, Ungarn"
         },
         "terms" : [
            {
               "offset" : 0,
               "value" : "Budapest"
            },
            {
               "offset" : 10,
               "value" : "Abonyi utca"
            },
            {
               "offset" : 23,
               "value" : "Ungarn"
            }
         ],
         "types" : [ "route", "geocode" ]
      },
...

Bad one:

/**/_xdc_._8umyg && _xdc_._8umyg( {
   "predictions" : [
      {
         "description" : "Budapest, Abonyi utca, Ungarn", // id is missing !!!!!!!!!
         "matched_substrings" : [
            {
               "length" : 2,
               "offset" : 10
            }
         ],
         "place_id" : "Eh1CdWRhcGVzdCwgQWJvbnlpIHV0Y2EsIFVuZ2FybiIuKiwKFAoSCcNfVy6H3EFHEZVUoNFY40HvEhQKEgnJz9TRNMNBRxFgER4MKcQABA",
         "reference" : "Eh1CdWRhcGVzdCwgQWJvbnlpIHV0Y2EsIFVuZ2FybiIuKiwKFAoSCcNfVy6H3EFHEZVUoNFY40HvEhQKEgnJz9TRNMNBRxFgER4MKcQABA",
         "structured_formatting" : {
            "main_text" : "Abonyi utca",
            "main_text_matched_substrings" : [
               {
                  "length" : 2,
                  "offset" : 0
               }
            ],
            "secondary_text" : "Budapest, Ungarn"
         },
         "terms" : [
            {
               "offset" : 0,
               "value" : "Budapest"
            },
            {
               "offset" : 10,
               "value" : "Abonyi utca"
            },
            {
               "offset" : 23,
               "value" : "Ungarn"
            }
         ],
         "types" : [ "route", "geocode" ]
      },
...

[lslee714]

Yeah it’s weird, the error only happens once and after it happens, it doesn’t complain again. I’ll take a look sometime in the near future haha