Warning: Encountered two children with the same key in Polaris' Navigation component

Shopify Discussion
1

Hi community, how are you doing? After a lot of research, I couldn’t find an answer. I hope your wisdom helps me a lot. I have this code:

------------------------------- CODE -------------------------------

const [navs, setNavs] = useState();
// THEN…

------------------------------- code# -------------------------------

** There, I’m passing 7 items like parameters for the first Navigation.Section and 2 for the other Navigation.Section. Any idea or suggestion?

I’m getting exactly 9 weird errors that say (I’ll share the log):

Warning: Encountered two children with the same key, [object Object]. 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.
in ul (created by Section)
in Section (at Navs.js:161)
in div (created by Scrollable)
in Scrollable (created by Navigation)
in nav (created by Navigation)
in Navigation (at Navs.js:159)
in Navs (at MainFrame.js:114)
in div (created by FrameInner)
in Transition (created by CSSTransition)
in CSSTransition (created by FrameInner)
in div (created by TrapFocus)
in Focus (created by TrapFocus)
in TrapFocus (created by FrameInner)
in div (created by FrameInner)
in FrameInner (created by Frame)
in Frame (at MainFrame.js:196)
in ShopProvider (at MainFrame.js:195)
in FocusManager (created by AppProvider)
in PortalsManager (created by AppProvider)
in MediaQueryProvider (created by AppProvider)
in div (created by ThemeProvider)
in ThemeProvider (created by AppProvider)
in AppProvider (at MainFrame.js:160)
in div (at MainFrame.js:159)
in MainFrame (at pages/index.js:5)
in Index (at _app.js:67)
in ApolloProvider (at _app.js:66)
in MyProvider (at _app.js:111)
in Provider (at _app.js:104)
in FocusManager (created by AppProvider)
in PortalsManager (created by AppProvider)
in MediaQueryProvider (created by AppProvider)
in div (created by ThemeProvider)
in ThemeProvider (created by AppProvider)
in AppProvider (at _app.js:103)
in MyApp
in ErrorBoundary (created by ReactDevOverlay)
in ReactDevOverlay (created by Container)
in Container (created by AppContainer)
in AppContainer
in Root

2 Likes