Encountered two children with the same key

[alexhnar]

Hi,

I'm using this package and when I select a result, sometimes I'll get an advisory message in RN telling me "Encountered two children with the same key, %s. Keys should be unique so that components maintain their identity across updates."

Full stacktrace is below. Any ideas?

Cheers, Alex

Warning: Encountered two children with the same key, %s. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.%s, place-undefined, in RCTView (at react-native-places-input/index.js:49) in RCTView (at react-native-places-input/index.js:32) in PlacesInput (at PlaceSearch.js:13) in RCTView (at PlaceSearch.js:12) in PlaceSearch (at AddressSettingModal.js:189) in RCTView (at AddressSettingModal.js:187) in RCTView (at AddressSettingModal.js:160) in RCTView (at AddressSettingModal.js:149) in TouchableWithoutFeedback (at AddressSettingModal.js:148) in RCTScrollContentView (at ScrollView.js:1038) in RCTScrollView (at ScrollView.js:1178) in ScrollView (at AddressSettingModal.js:147) in RCTView (at AddressSettingModal.js:146) in RCTSafeAreaView (at SafeAreaView.js:55) in SafeAreaView (at AddressSettingModal.js:145) in RCTView (at AppContainer.js:101) in RCTView (at AppContainer.js:119) in AppContainer (at Modal.js:250) in RCTView (at Modal.js:271) in RCTModalHostView (at Modal.js:258) in Modal (at AddressSettingModal.js:140) in AddressSettingModal (created by ConnectFunction) in ConnectFunction (at HomeHeader.js:96) in RCTView (at HomeHeader.js:89) in HomeHeader (created by ConnectFunction) in ConnectFunction (at HomeStack.js:20) in RCTView (at createAnimatedComponent.js:151) in AnimatedComponent (at HeaderSegment.tsx:346) in RCTView (at HeaderSegment.tsx:332) in RCTView (at createAnimatedComponent.js:151) in AnimatedComponent (at HeaderSegment.tsx:324) in HeaderSegment (at Header.tsx:58) in Header (at HeaderContainer.tsx:151) in RCTView (at HeaderContainer.tsx:124) in RCTView (at HeaderContainer.tsx:59) in HeaderContainer (at StackView.tsx:328) in CardStack (at StackView.tsx:433) in KeyboardManager (at StackView.tsx:431) in SafeAreaProviderCompat (at StackView.tsx:428) in RCTView (at StackView.tsx:427) in StackView (at createStackNavigator.tsx:82) in StackNavigator (at HomeStack.js:15) in HomeStack (at SceneView.tsx:121) in StaticContainer in StaticContainer (at SceneView.tsx:112) in EnsureSingleNavigator (at SceneView.tsx:111) in SceneView (at useDescriptors.tsx:147) in RCTView (at BottomTabView.tsx:42) in SceneContent (at BottomTabView.tsx:118) in RCTView (at ResourceSavingScene.tsx:44) in RCTView (at ResourceSavingScene.tsx:27) in ResourceSavingScene (at BottomTabView.tsx:113) in RCTView (at screens.native.js:132) in ScreenContainer (at BottomTabView.tsx:97) in RCTView (at BottomTabView.tsx:96) in SafeAreaProviderCompat (at BottomTabView.tsx:95) in BottomTabView (at createBottomTabNavigator.tsx:41) in BottomTabNavigator (at TabNav.js:18) in EnsureSingleNavigator (at BaseNavigationContainer.tsx:277) in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:64) in ThemeProvider (at NavigationContainer.tsx:63) in ForwardRef(NavigationContainer) (at TabNav.js:17) in TabNav (at RootContainer.js:51) in RootContainer (created by FirestoreConnectWrapped(RootContainer)) in FirestoreConnectWrapped(RootContainer) (created by Context.Consumer) in FirestoreConnect(RootContainer) (created by ConnectFunction) in ConnectFunction (at App.js:42) in RNCSafeAreaView (at src/index.tsx:28) in SafeAreaProvider (at App.js:41) in ReduxFirestoreProvider (created by ReactReduxFirebaseProvider) in ReactReduxFirebaseProvider (at App.js:40) in Provider (at App.js:39) in App (at withExpoRoot.js:26) in ExpoRoot (at renderApplication.js:40) in RCTView (at AppContainer.js:101) in DevAppContainer (at AppContainer.js:115) in RCTView (at AppContainer.js:119) in AppContainer (at renderApplication.js:39)

[vibhu-athavaria]

Same issue for me too.

[vibhu-athavaria]

Found the problem.

In index.js:73 you have key={'place-${place.id}'}. It should be key={'place-${place.place_id}'} instead.

I forked it and fixed the issue. Not sure how should I change you my PR. But here is my forked url: https://github.com/vibhu-athavaria/react-native-places-input.

Thanks for building this awesome component.

[jaing]

Fixed- thanks!