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

[furyozo]

There is a key prop missing inside the PlacesAutocomplete component render method

[OtavioPalma]

I had the same problem, the solution was to add a key prop inside the returned div of the map function, here's my code:

<div>
   {loading && <Skeleton animation="wave" height={68} />}
   {suggestions.map(suggestion => {
      return (
         <div
            key={suggestion.placeId}
            {...getSuggestionItemProps(suggestion, {
               className: 'modal_suggestions',
            })}>
               <span>{suggestion.formattedSuggestion.mainText}</span>
               <span>{suggestion.formattedSuggestion.secondaryText}</span>
         </div>);
   })}
 </div>

[JulienMelissas]

Thanks for the tip @OtavioPalma - unfortunately I tried with both suggestion.id and suggestion.placeId and the error was still there. It's possible I tried something wrong though!

[OtavioPalma]

Thanks for the tip @OtavioPalma - unfortunately I tried with both suggestion.id and suggestion.placeId and the error was still there. It's possible I tried something wrong though!

I was looking into the repo issues and I found this:

...just be sure that you add key={suggestion.placeId} after the call to getSuggestionItemProps() or you'll over write the key with the id instead of the desired placeId.

Maybe that's what you're doing wrong?

[stesvis]

I also added key={suggestion.placeId} but the error still shows when you type the first character.. This worked tho, like @OtavioPalma said.

<div
  {...getSuggestionItemProps(suggestion, {
	className,
	style,
  })}
  key={suggestion.placeId}>
  <span>{suggestion.description}</span>
</div>

[OleksiiKachan]

had the same issue. was resolved after putting key prop to the very end. looks like getSuggestionItemProps overrides key prop

[simkieu]

I had the same issue. Took me a few days to look up on the internet and finally I found the answer here. Putting the key to the end solved the problem. Thanks all!

[opiation]

If anyone's curious, this is where this overwriting is happening:

https://github.com/hibiken/react-places-autocomplete/blob/dbb297486d21740dd1f15ec35fb3b45f7eebcb61/src/PlacesAutocomplete.js#L298-L312

I would also note that the type of Suggestion['id'] is a string but in the implementation here, suggestion.id is set to the prediction.id from the Maps prediction API and according to its type signature (AutocompletePrediction), there is no id property. I can confirm that in practice, suggestion.id is always undefined for me.

The type signature point should probably be aimed at @types/react-places-autocomplete but I thought that might still help others here.

@hibiken, since suggestion.placeId appears to actually be unique per suggestion, should getSuggestionItemProps be updated to return placeId as the key?

[opiation]

FWIW, this might actually be a duplicate of #335 which would be fixed with #338 that accomplishes exactly the workaround above:

Workaround

<div
  {...getSuggestionItemProps(suggestion)}
  key={suggestion.placeId} // must be after `getSuggestionItemProps`
>

After merging #338

<div {...getSuggestionItemProps(suggestion)}>