Skip to content

[BUG?] Missing key on AppContainer react fragment #891

@LuAPi

Description

@LuAPi

I haven't seen this before, but I notice that dash 1.2.0 was released very recently and I just rebuilt my container so it might not be something I've done.

Describe your context
docker image based on python environment behind nginx docker

  • replace the result of pip list | grep dash below
dash                         1.2.0  
dash-core-components         1.1.2  
dash-html-components         1.0.1  
dash-renderer                1.0.1  
dash-table                   4.2.0 
  • if frontend related, tell us your Browser, Version and OS

    • OS: MacOS
    • Browser chrome
    • Version 76.0.3809.132 (Official Build) (64-bit)

Describe the bug
React warning in console

Warning: Each child in a list should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.
    in th (created by t)
    in tr (created by t)
    in tbody (created by t)
    in table (created by t)
    in div (created by t)
    in div (created by t)
    in div (created by t)
    in div (created by t)
    in div (created by t)
    in t (created by t)
.....
    in div (created by GlobalErrorOverlay)
    in GlobalErrorOverlay (created by DebugMenu)
    in div (created by DebugMenu)
    in DebugMenu (created by UnconnectedGlobalErrorContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in UnconnectedGlobalErrorContainer (created by Connect(UnconnectedGlobalErrorContainer))
    in Connect(UnconnectedGlobalErrorContainer) (created by UnconnectedContainer)
    in UnconnectedContainer (created by Connect(UnconnectedContainer))
    in Connect(UnconnectedContainer) (created by UnconnectedAppContainer)
    in UnconnectedAppContainer (created by Connect(UnconnectedAppContainer))
    in Connect(UnconnectedAppContainer) (created by AppProvider)
    in Provider (created by AppProvider)
    in AppProvider

It seems to be being generated by https://github.com/plotly/dash/blob/master/dash-renderer/src/AppContainer.react.js#L50-L54
where those 5 elements in the fragment become an array object as the children of the parent node.
The react function reconcileChildFibers tests if the fragment has a key and if it doesn't (which is the case here) it tests if the fragment's children are an array (which is the case here) and then it expects those elements to have a key.

I think adding a key to the <React.Fragment> here https://github.com/plotly/dash/blob/master/dash-renderer/src/AppContainer.react.js#L49
would fix it, though I'm not sure on a sensible value.

Expected behavior
No warning message emitted
Screenshots

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions