🐛 [BUG] - Warning: Each child in a list should have a unique "key" prop.

[kahirokunn]

Description

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

Reproduction URL

https://github.com/projectsveltos/dashboard

Reproduction steps

This occurred after installing Dashboard on Local Playground.
It is working errorishly and I don't see any impact on the operation, but to maintain the intended UI, key prop errors should basically be addressed.

https://projectsveltos.github.io/sveltos/getting_started/install/quick_start/
https://projectsveltos.github.io/sveltos/getting_started/install/dashboard/
URL: http://localhost:5173/sveltos/clusters/SveltosCluster/1

Screenshots

Logs

client.ts:19 [vite] connecting...
client.ts:134 [vite] connected.
react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Header`. See https://reactjs.org/link/warning-keys for more information.
    at _c (http://localhost:5173/src/components/ui/button.tsx:44:3)
    at Header (http://localhost:5173/src/components/layouts/Header.tsx:35:27)
    at Applayout
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=58ad9bfd:4016:5)
    at RenderErrorBoundary (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=58ad9bfd:3976:5)
    at DataRoutes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=58ad9bfd:5164:5)
    at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=58ad9bfd:4428:15)
    at RouterProvider (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=58ad9bfd:4978:5)
    at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-37X6HOVV.js?v=fbd8cee6:40:15)
    at TooltipProvider (http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-tooltip.js?v=f861ceda:91:5)
    at QueryClientProvider2 (http://localhost:5173/node_modules/.vite/deps/react-query.js?v=e7a968da:2661:21)
    at ThemeProvider (http://localhost:5173/src/contexts/ThemeContext.tsx:24:3)
    at App
overrideMethod @ hook.js:608
printWarning @ react-jsx-dev-runtime.development.js:87
error @ react-jsx-dev-runtime.development.js:61
validateExplicitKey @ react-jsx-dev-runtime.development.js:1078
validateChildKeys @ react-jsx-dev-runtime.development.js:1105
jsxWithValidation @ react-jsx-dev-runtime.development.js:1277
Header @ Header.tsx:59
renderWithHooks @ react-dom.development.js:15486
mountIndeterminateComponent @ react-dom.development.js:20103
beginWork @ react-dom.development.js:21626
beginWork$1 @ react-dom.development.js:27465
performUnitOfWork @ react-dom.development.js:26596
workLoopSync @ react-dom.development.js:26505
renderRootSync @ react-dom.development.js:26473
performConcurrentWorkOnRoot @ react-dom.development.js:25777
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
deprecations.ts:9 ⚠️ React Router Future Flag Warning: React Router will begin wrapping state updates in `React.startTransition` in v7. You can use the `v7_startTransition` future flag to opt-in early. For more information, see https://reactrouter.com/v6/upgrading/future#v7_starttransition. Error Component Stack
    at RouterProvider (index.tsx:489:3)
    at Provider (createContext.tsx:59:15)
    at TooltipProvider (Tooltip.tsx:68:5)
    at QueryClientProvider2 (QueryClientProvider.js:32:21)
    at ThemeProvider (ThemeContext.tsx:23:3)
    at App (<anonymous>)
overrideMethod @ hook.js:608
warnOnce @ deprecations.ts:9
logDeprecation @ deprecations.ts:14
logV6DeprecationWarnings @ deprecations.ts:26
(anonymous) @ index.tsx:721
commitHookEffectListMount @ react-dom.development.js:23189
commitPassiveMountOnFiber @ react-dom.development.js:24965
commitPassiveMountEffects_complete @ react-dom.development.js:24930
commitPassiveMountEffects_begin @ react-dom.development.js:24917
commitPassiveMountEffects @ react-dom.development.js:24905
flushPassiveEffectsImpl @ react-dom.development.js:27078
flushPassiveEffects @ react-dom.development.js:27023
performSyncWorkOnRoot @ react-dom.development.js:26115
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26998
commitRoot @ react-dom.development.js:26721
finishConcurrentRender @ react-dom.development.js:26020
performConcurrentWorkOnRoot @ react-dom.development.js:25848
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
deprecations.ts:9 ⚠️ React Router Future Flag Warning: Relative route resolution within Splat routes is changing in v7. You can use the `v7_relativeSplatPath` future flag to opt-in early. For more information, see https://reactrouter.com/v6/upgrading/future#v7_relativesplatpath. Error Component Stack
    at RouterProvider (index.tsx:489:3)
    at Provider (createContext.tsx:59:15)
    at TooltipProvider (Tooltip.tsx:68:5)
    at QueryClientProvider2 (QueryClientProvider.js:32:21)
    at ThemeProvider (ThemeContext.tsx:23:3)
    at App (<anonymous>)
overrideMethod @ hook.js:608
warnOnce @ deprecations.ts:9
logDeprecation @ deprecations.ts:14
logV6DeprecationWarnings @ deprecations.ts:37
(anonymous) @ index.tsx:721
commitHookEffectListMount @ react-dom.development.js:23189
commitPassiveMountOnFiber @ react-dom.development.js:24965
commitPassiveMountEffects_complete @ react-dom.development.js:24930
commitPassiveMountEffects_begin @ react-dom.development.js:24917
commitPassiveMountEffects @ react-dom.development.js:24905
flushPassiveEffectsImpl @ react-dom.development.js:27078
flushPassiveEffects @ react-dom.development.js:27023
performSyncWorkOnRoot @ react-dom.development.js:26115
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26998
commitRoot @ react-dom.development.js:26721
finishConcurrentRender @ react-dom.development.js:26020
performConcurrentWorkOnRoot @ react-dom.development.js:25848
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
deprecations.ts:9 ⚠️ React Router Future Flag Warning: The persistence behavior of fetchers is changing in v7. You can use the `v7_fetcherPersist` future flag to opt-in early. For more information, see https://reactrouter.com/v6/upgrading/future#v7_fetcherpersist. Error Component Stack
    at RouterProvider (index.tsx:489:3)
    at Provider (createContext.tsx:59:15)
    at TooltipProvider (Tooltip.tsx:68:5)
    at QueryClientProvider2 (QueryClientProvider.js:32:21)
    at ThemeProvider (ThemeContext.tsx:23:3)
    at App (<anonymous>)
overrideMethod @ hook.js:608
warnOnce @ deprecations.ts:9
logDeprecation @ deprecations.ts:14
logV6DeprecationWarnings @ deprecations.ts:46
(anonymous) @ index.tsx:721
commitHookEffectListMount @ react-dom.development.js:23189
commitPassiveMountOnFiber @ react-dom.development.js:24965
commitPassiveMountEffects_complete @ react-dom.development.js:24930
commitPassiveMountEffects_begin @ react-dom.development.js:24917
commitPassiveMountEffects @ react-dom.development.js:24905
flushPassiveEffectsImpl @ react-dom.development.js:27078
flushPassiveEffects @ react-dom.development.js:27023
performSyncWorkOnRoot @ react-dom.development.js:26115
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26998
commitRoot @ react-dom.development.js:26721
finishConcurrentRender @ react-dom.development.js:26020
performConcurrentWorkOnRoot @ react-dom.development.js:25848
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
deprecations.ts:9 ⚠️ React Router Future Flag Warning: Casing of `formMethod` fields is being normalized to uppercase in v7. You can use the `v7_normalizeFormMethod` future flag to opt-in early. For more information, see https://reactrouter.com/v6/upgrading/future#v7_normalizeformmethod. Error Component Stack
    at RouterProvider (index.tsx:489:3)
    at Provider (createContext.tsx:59:15)
    at TooltipProvider (Tooltip.tsx:68:5)
    at QueryClientProvider2 (QueryClientProvider.js:32:21)
    at ThemeProvider (ThemeContext.tsx:23:3)
    at App (<anonymous>)
overrideMethod @ hook.js:608
warnOnce @ deprecations.ts:9
logDeprecation @ deprecations.ts:14
logV6DeprecationWarnings @ deprecations.ts:54
(anonymous) @ index.tsx:721
commitHookEffectListMount @ react-dom.development.js:23189
commitPassiveMountOnFiber @ react-dom.development.js:24965
commitPassiveMountEffects_complete @ react-dom.development.js:24930
commitPassiveMountEffects_begin @ react-dom.development.js:24917
commitPassiveMountEffects @ react-dom.development.js:24905
flushPassiveEffectsImpl @ react-dom.development.js:27078
flushPassiveEffects @ react-dom.development.js:27023
performSyncWorkOnRoot @ react-dom.development.js:26115
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26998
commitRoot @ react-dom.development.js:26721
finishConcurrentRender @ react-dom.development.js:26020
performConcurrentWorkOnRoot @ react-dom.development.js:25848
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
deprecations.ts:9 ⚠️ React Router Future Flag Warning: `RouterProvider` hydration behavior is changing in v7. You can use the `v7_partialHydration` future flag to opt-in early. For more information, see https://reactrouter.com/v6/upgrading/future#v7_partialhydration. Error Component Stack
    at RouterProvider (index.tsx:489:3)
    at Provider (createContext.tsx:59:15)
    at TooltipProvider (Tooltip.tsx:68:5)
    at QueryClientProvider2 (QueryClientProvider.js:32:21)
    at ThemeProvider (ThemeContext.tsx:23:3)
    at App (<anonymous>)
overrideMethod @ hook.js:608
warnOnce @ deprecations.ts:9
logDeprecation @ deprecations.ts:14
logV6DeprecationWarnings @ deprecations.ts:62
(anonymous) @ index.tsx:721
commitHookEffectListMount @ react-dom.development.js:23189
commitPassiveMountOnFiber @ react-dom.development.js:24965
commitPassiveMountEffects_complete @ react-dom.development.js:24930
commitPassiveMountEffects_begin @ react-dom.development.js:24917
commitPassiveMountEffects @ react-dom.development.js:24905
flushPassiveEffectsImpl @ react-dom.development.js:27078
flushPassiveEffects @ react-dom.development.js:27023
performSyncWorkOnRoot @ react-dom.development.js:26115
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26998
commitRoot @ react-dom.development.js:26721
finishConcurrentRender @ react-dom.development.js:26020
performConcurrentWorkOnRoot @ react-dom.development.js:25848
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
deprecations.ts:9 ⚠️ React Router Future Flag Warning: The revalidation behavior after 4xx/5xx `action` responses is changing in v7. You can use the `v7_skipActionErrorRevalidation` future flag to opt-in early. For more information, see https://reactrouter.com/v6/upgrading/future#v7_skipactionerrorrevalidation. Error Component Stack
    at RouterProvider (index.tsx:489:3)
    at Provider (createContext.tsx:59:15)
    at TooltipProvider (Tooltip.tsx:68:5)
    at QueryClientProvider2 (QueryClientProvider.js:32:21)
    at ThemeProvider (ThemeContext.tsx:23:3)
    at App (<anonymous>)
overrideMethod @ hook.js:608
warnOnce @ deprecations.ts:9
logDeprecation @ deprecations.ts:14
logV6DeprecationWarnings @ deprecations.ts:70
(anonymous) @ index.tsx:721
commitHookEffectListMount @ react-dom.development.js:23189
commitPassiveMountOnFiber @ react-dom.development.js:24965
commitPassiveMountEffects_complete @ react-dom.development.js:24930
commitPassiveMountEffects_begin @ react-dom.development.js:24917
commitPassiveMountEffects @ react-dom.development.js:24905
flushPassiveEffectsImpl @ react-dom.development.js:27078
flushPassiveEffects @ react-dom.development.js:27023
performSyncWorkOnRoot @ react-dom.development.js:26115
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26998
commitRoot @ react-dom.development.js:26721
finishConcurrentRender @ react-dom.development.js:26020
performConcurrentWorkOnRoot @ react-dom.development.js:25848
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

Browsers

Chrome

OS

Mac

[Safouene1]

Hey @kahirokunn , Thank you very much , I really appreciate it .
Silly mistake from me. will be fixed on next release very soon.