Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Enhancement] A props object containing a "key" prop is being spread into JSX #186

Open
hank205 opened this issue Jan 19, 2025 · 0 comments

Comments

@hank205
Copy link

hank205 commented Jan 19, 2025

Problem

When ModalSelector set property backdropPressToClose={true}, a warning message shows up because of changes in React 18:

 (NOBRIDGE) ERROR  Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, accessible: ..., onPress: ..., children: ...};
  <TouchableWithoutFeedback {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {accessible: ..., onPress: ..., children: ...};
  <TouchableWithoutFeedback key={someKey} {...props} />
    in ModalSelector (created by Index)
    in RCTView (created by View)
    in View (created by Index)
    in RCTView (created by View)
    in View (created by Index)
    in Index
    in Unknown (created by Route(index))
    in Suspense (created by Route(index))
    in Route (created by Route(index))
    in Route(index) (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by NativeStackNavigator)
    in RNSScreenContentWrapper (created by ScreenContentWrapper)
    in ScreenContentWrapper (created by DebugContainer)
    in DebugContainer
    in RNSScreen (created by Animated(Anonymous))
    in Animated(Anonymous)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze
    in InnerScreen (created by Screen)
    in Screen
    in ScreenStackItem (created by SceneView)
    in SceneView (created by NativeStackView)
    in RNSScreenStack (created by ScreenStack)
    in Unknown (created by ScreenStack)
    in ScreenStack (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaProviderCompat)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator
    in Unknown (created by RootLayout)
    in RootLayout
    in Unknown (created by Route())
    in Suspense (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in wrapper (created by ContextNavigator)
    in ThemeProvider
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (created by withDevTools(ErrorOverlay))
    in withDevTools(ErrorOverlay)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

Fix

in index.js around line 296-315 split the "key" property out of overlayProps.

        let overlayKey = {};
        ...

          overlayKey = {
            key: `modalSelector${componentIndex++}`,
          }
          overlayProps = {
              accessible: false,
              onPress: this.close,
        ...

            <Overlay key={overlayKey} {...overlayProps}>
@hank205 hank205 changed the title A props object containing a "key" prop is being spread into JSX [Enhancement] A props object containing a "key" prop is being spread into JSX Jan 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant