Repository navigation
[BUG?] Missing key on AppContainer react fragment #891
Description
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 dashbelow
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
Activity
[-][BUG?][/-][+][BUG?] missing key[/+][-][BUG?] missing key[/-][+][BUG?] Missing key on AppContainer react fragment[/+]byronz commentedon Aug 28, 2019
debugging another issue in the graph, and I was able to see the same warning after an error was caught
LuAPi commentedon Aug 29, 2019
I notice your stack trace also starts by mentioning the DebugMenu and GlobalErrorOverlay. I'd cut that out of mine for brevity but I think it might be relevant with your observation that you only saw it after an error was caught. I edited the first post to include that part.
Perhaps it's triggered by rendering the debug menu?
robustify stdl001 (plotly#891)
robustify stdl001 (#891)
gvwilson commentedon Jul 17, 2024
Hi - we are tidying up stale issues and PRs in Plotly's public repositories so that we can focus on things that are most important to our community. If this issue is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. (Please note that we will give priority to reports that include a short reproducible example.) If you'd like to submit a PR, we'd be happy to prioritize a review, and if it's a request for tech support, please post in our community forum. Thank you - @gvwilson