NativeBase: Select.Item Key prop missing

Description

I have the error key prop missing on the select component

CodeSandBox/Snack link

https://snack.expo.dev/@grean/nativebaseselectkeypropissue

Steps to reproduce

Don’t know if you can see the react native errors log with the snak. I was not successful with seeing them…

NativeBase Version

3.3.2

Platform

Android
CRA
Expo
iOS
Next

Other Platform

No response

Additional Information

No error on the Web part. Here my code However, the key prop is here.

  const orders = Array.from({ length: executionCount }, (_, i) => (i + 1).toString())

                <Select
                  selectedValue={order.toString()}
                  flex={0.5}
                  // minWidth="200"
                  accessibilityLabel="Choose Service"
                  placeholder="Choose Service"
                  mt={1}
                  _selectedItem={{
                    bg: colors.primary[200],
                    endIcon: <CheckIcon size="5" />,
                  }}
                // onValueChange={(itemValue) => setService(itemValue)}
                >
                  {
                    orders.map(order => <Select.Item
                      key={order}
                      label={order}
                      value={order}
                    />)
                  }
                </Select>

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 2
Comments: 21

Most upvoted comments

Hi everyone, Thanks for reporting the issue. We’re working on it.

ankit-tailor on Feb 3, 2022

Thanks @kcrt for the workaround, it worked for me. The problem is with the default dropdown icon coming with the Select component. I did almost the same, but with an Icon component using Ionicons from @expo/vector-icons. This solution will remove the key props warning:

Thanks!

jharteaga on Jan 31, 2022

I also have the error warning

felix-lambert on Jan 27, 2022

I’m sorry but i continue to get this error message:

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

Check the render method of `ForwardRef(createdIcon)`. See https://reactjs.org/link/warning-keys for more information.
    at G (http://127.0.0.1:8081/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:143293:36)
    in createdIcon
    in RCTView (created by View)
    in View
    in Unknown
    in Box
    in Input
    in RCTView (created by View)
    in View (created by Pressable)
    in Pressable (created by Pressable)
    in Select
    in RCTView (created by View)
    in View
    in Unknown
    in Box
    in RCTView (created by View)
    in View
    in Unknown
    in Box
    in Stack
    in HStack
    in RCTView (created by View)
    in View
    in Unknown
    in Box
    in Stack
    in VStack
    in RCTView (created by View)
    in View
    in Unknown
    in Box
    in Stack
    in HStack
    in RCTView (created by View)
    in View
    in Unknown
    in Box
    in Stack
    in HStack
    in RCTView (created by View)
    in View
    in Unknown
    in Box
    in ExecutionEditCard (created by TrainingEditScreen)
    in RCTScrollContentView (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView
    in Unknown
    in Unknown (created by TrainingEditScreen)
    in RCTView (created by View)
    in View
    in Unknown
    in Box
    in TrainingEditScreen (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in SceneView (created by PagerViewAdapter)
    in RNCViewPager (created by PagerView)
    in PagerView (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by PagerViewAdapter)
    in PagerViewAdapter (created by TabView)
    in RCTView (created by View)
    in View (created by TabView)
    in TabView (created by MaterialTopTabView)
    in MaterialTopTabView (created by MaterialTopTabNavigator)
    in Unknown (created by MaterialTopTabNavigator)
    in MaterialTopTabNavigator (created by TrainingScreen)
    in RCTView (created by View)
    in View
    in Unknown
    in Box
    in RCTView (created by View)
    in View
    in Unknown
    in Box
    in TrainingScreen (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by CardContainer)
    in RCTView (created by View)
    in View (created by CardContainer)
    in RCTView (created by View)
    in View (created by CardContainer)
    in RCTView (created by View)
    in View
    in CardSheet (created by Card)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by PanGestureHandler)
    in PanGestureHandler (created by PanGestureHandler)
    in PanGestureHandler (created by Card)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Card)
    in RCTView (created by View)
    in View (created by Card)
    in Card (created by CardContainer)
    in CardContainer (created by CardStack)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Screen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by MaybeFreeze)
    in MaybeFreeze (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by CardStack)
    in RNSScreenContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by CardStack)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by CardStack)
    in CardStack (created by HeaderShownContext)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by StackView)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by StackView)
    in StackView (created by StackNavigator)
    in Unknown (created by StackNavigator)
    in StackNavigator (created by Main)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by Main)
    in RCTSafeAreaView
    in SafeAreaView (created by Main)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by Main)
    in Main (created by App)
    in SSRProvider (created by NativeBaseProvider)
    in ToastProvider (created by NativeBaseProvider)
    in PortalProvider (created by NativeBaseProvider)
    in HybridProvider (created by NativeBaseProvider)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by NativeBaseProvider)
    in ResponsiveQueryProvider (created by NativeBaseProvider)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by NativeBaseProvider)
    in NativeBaseConfigProviderProvider (created by NativeBaseProvider)
    in NativeBaseProvider (created by App)
    in Provider (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer

It’s more related to the ForwardRef(createdIcon). I should post the message before sorry for that. I think this issue #4429 is related too

grean on Jan 18, 2022

Hi everyone, This issue is fixed in 3.4.0. Let me know if this doesn’t work for you.

ankit-tailor on Jun 27, 2022

snack does not show local warning like “should have a unique key prop”, even with simple example like:

  <Select>
    <Select.Item label="1" value="1" />
    <Select.Item label="2" value="2" />
    <Select.Item label="3" value="3" />
  </Select>

In local development environment with native-base 3.3.4, this issue still persists under iOS. This problem does not occur in web mode. As mentioned in https://github.com/GeekyAnts/NativeBase/issues/4429#issuecomment-1001768489 , SVGIcon without key prop in createIcon seems to cause this problem. https://github.com/GeekyAnts/NativeBase/blob/2af374e586034366dcefce9a0f23983836a7901f/src/components/primitives/Icon/createIcon.tsx#L14

For a workaround, I use dropdownIcon={<Text>↓</Text>} to tell avoid using ChevronDownIcon.

kcrt on Jan 25, 2022

We’re working on this. Thanks for your patience.

surajahmed on Apr 20, 2022

Thanks @jharteaga no more warning. Maybe solving the warning with the default component could be cool.

felix-lambert on Feb 1, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] on Jun 22, 2022