[bug] react warning "Each child in a list should have a unique "key" prop."

Haladesta commented 2 weeks ago

When combining dmv.Tooltip with dmc.Anchor (either Tooltip inside Anchor or vice versa) a warning is emitted in the console: Warning: Each child in a list should have a unique "key" prop.

Minimal example:

import dash_mantine_components as dmc
from dash import Dash, _dash_renderer

_dash_renderer._set_react_version("18.2.0")

app = Dash()

app.layout = [
    dmc.MantineProvider(
        dmc.Anchor(
            dmc.Tooltip(
                dmc.Text("Some Text Here"),
                label="Tooltip text",
            ),
            href=r"https://www.google.com/",
            target="_blank",
        )
    )
]

if __name__ == '__main__':
    app.run(debug=True)

Warning:

Show

```Python traceback Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information. 95300/R<@http://localhost:8050/_dash-component-suites/dash_mantine_components/dash_mantine_components.v0_14_6m1730198239.js:2:1567052 l@http://localhost:8050/_dash-component-suites/dash_mantine_components/dash_mantine_components.v0_14_6m1730198239.js:2:1139399 CheckedComponent@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:3989:17 ComponentErrorBoundary@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:7593:20 BaseTreeContainer@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:4028:20 DashWrapper@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:4019:66 c@http://localhost:8050/_dash-component-suites/dash_mantine_components/dash_mantine_components.v0_14_6m1730198239.js:2:1614032 p@http://localhost:8050/_dash-component-suites/dash_mantine_components/dash_mantine_components.v0_14_6m1730198239.js:2:1612315 l@http://localhost:8050/_dash-component-suites/dash_mantine_components/dash_mantine_components.v0_14_6m1730198239.js:2:1163788 CheckedComponent@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:3989:17 ComponentErrorBoundary@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:7593:20 BaseTreeContainer@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:4028:20 DashWrapper@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:4019:66 div div div GlobalErrorOverlay@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:8032:20 div DebugMenu@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:8138:20 div UnconnectedGlobalErrorContainer@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:7958:20 ConnectFunction@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:11756:68 UnconnectedContainer@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:3563:22 ConnectFunction@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:11756:68 UnconnectedAppContainer@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:3797:20 ConnectFunction@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:11756:68 Provider@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:11471:15 AppProvider@http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_18_1m1730198115.dev.js:235:15 dash_mantine_components.v0_14_6m1730198239.js:2:1630095 error dash_mantine_components.v0_14_6m1730198239.js:2 printWarning react-dom@18.v2_18_1m1730198116.2.0.js:73 error react-dom@18.v2_18_1m1730198116.2.0.js:47 warnForMissingKey react-dom@18.v2_18_1m1730198116.2.0.js:14806 warnOnInvalidKey react-dom@18.v2_18_1m1730198116.2.0.js:15285 reconcileChildrenArray react-dom@18.v2_18_1m1730198116.2.0.js:15340 reconcileChildFibers react-dom@18.v2_18_1m1730198116.2.0.js:15831 reconcileChildren react-dom@18.v2_18_1m1730198116.2.0.js:19177 updateForwardRef react-dom@18.v2_18_1m1730198116.2.0.js:19268 beginWork react-dom@18.v2_18_1m1730198116.2.0.js:21646 beginWork$1 react-dom@18.v2_18_1m1730198116.2.0.js:27436 performUnitOfWork react-dom@18.v2_18_1m1730198116.2.0.js:26570 workLoopSync react-dom@18.v2_18_1m1730198116.2.0.js:26476 renderRootSync react-dom@18.v2_18_1m1730198116.2.0.js:26444 performSyncWorkOnRoot react-dom@18.v2_18_1m1730198116.2.0.js:26095 flushSyncCallbacks react-dom@18.v2_18_1m1730198116.2.0.js:12052 ensureRootIsScheduled react-dom@18.v2_18_1m1730198116.2.0.js:25661 (Async: VoidFunction) ensureRootIsScheduled react-dom@18.v2_18_1m1730198116.2.0.js:25653 scheduleUpdateOnFiber react-dom@18.v2_18_1m1730198116.2.0.js:25541 forceStoreRerender react-dom@18.v2_18_1m1730198116.2.0.js:16987 handleStoreChange react-dom@18.v2_18_1m1730198116.2.0.js:16963 Redux 3 batchedUpdates$1 react-dom@18.v2_18_1m1730198116.2.0.js:26150 Redux 5 batchedUpdates$1 react-dom@18.v2_18_1m1730198116.2.0.js:26150 Redux 6 ./src/actions/api.js/apiThunk/_callee/_callee$/< api.js:108 (Async: promise callback) _callee$ api.js:107 tryCatch api.js:2 makeInvokeMethod api.js:2 defineIteratorMethods api.js:2 asyncGeneratorStep api.js:2 _next api.js:2 (Async: promise callback) asyncGeneratorStep api.js:2 _next api.js:2 _asyncToGenerator api.js:2 _asyncToGenerator api.js:2 apiThunk api.js:133 middleware Redux storeEffect React batchedUpdates$1 react-dom@18.v2_18_1m1730198116.2.0.js:26150 storeEffect React commitHookEffectListMount react-dom@18.v2_18_1m1730198116.2.0.js:23160 commitPassiveMountOnFiber react-dom@18.v2_18_1m1730198116.2.0.js:24941 commitPassiveMountEffects_complete react-dom@18.v2_18_1m1730198116.2.0.js:24901 commitPassiveMountEffects_begin react-dom@18.v2_18_1m1730198116.2.0.js:24888 commitPassiveMountEffects react-dom@18.v2_18_1m1730198116.2.0.js:24876 flushPassiveEffectsImpl react-dom@18.v2_18_1m1730198116.2.0.js:27049 flushPassiveEffects react-dom@18.v2_18_1m1730198116.2.0.js:26994 commitRootImpl react-dom@18.v2_18_1m1730198116.2.0.js:26945 commitRoot react-dom@18.v2_18_1m1730198116.2.0.js:26692 performSyncWorkOnRoot react-dom@18.v2_18_1m1730198116.2.0.js:26127 flushSyncCallbacks react-dom@18.v2_18_1m1730198116.2.0.js:12052 flushPassiveEffectsImpl react-dom@18.v2_18_1m1730198116.2.0.js:27070 flushPassiveEffects react-dom@18.v2_18_1m1730198116.2.0.js:26994 commitRootImpl react-dom@18.v2_18_1m1730198116.2.0.js:26779 workLoop react@18.v2_18_1m1730198116.2.0.js:2653 flushWork react@18.v2_18_1m1730198116.2.0.js:2626 performWorkUntilDeadline react@18.v2_18_1m1730198116.2.0.js:2920 exports polyfill@7.v2_18_1m1730198116.12.1.min.js:1 polyfill@7.v2_18_1m1730198116.12.1.min.js:1 Rx polyfill@7.v2_18_1m1730198116.12.1.min.js:1 Sx polyfill@7.v2_18_1m1730198116.12.1.min.js:1 (Async: EventHandlerNonNull) [134]< polyfill@7.v2_18_1m1730198116.12.1.min.js:1 o polyfill@7.v2_18_1m1730198116.12.1.min.js:1 o polyfill@7.v2_18_1m1730198116.12.1.min.js:1 [230]< polyfill@7.v2_18_1m1730198116.12.1.min.js:1 o polyfill@7.v2_18_1m1730198116.12.1.min.js:1 o polyfill@7.v2_18_1m1730198116.12.1.min.js:1 [1]< polyfill@7.v2_18_1m1730198116.12.1.min.js:1 o polyfill@7.v2_18_1m1730198116.12.1.min.js:1 o polyfill@7.v2_18_1m1730198116.12.1.min.js:1 [307]< polyfill@7.v2_18_1m1730198116.12.1.min.js:1 o polyfill@7.v2_18_1m1730198116.12.1.min.js:1 o polyfill@7.v2_18_1m1730198116.12.1.min.js:1 [306]< polyfill@7.v2_18_1m1730198116.12.1.min.js:1 o polyfill@7.v2_18_1m1730198116.12.1.min.js:1 r polyfill@7.v2_18_1m1730198116.12.1.min.js:1 polyfill@7.v2_18_1m1730198116.12.1.min.js:1 ```

AnnMarieW commented 2 weeks ago

@Haladesta

Thanks for reporting - I think there may be some other scenarios that result in this warning message as well. Need to catch all of them. I made the title a little more generic.

AnnMarieW commented 1 week ago

This can be narrowed down to the Tootlip. So far I cant figure out what is generating the error message:

import dash_mantine_components as dmc
from dash import Dash, _dash_renderer

_dash_renderer._set_react_version("18.2.0")

app = Dash()

app.layout = dmc.MantineProvider(        
    dmc.Tooltip(
        dmc.Text("Some Text Here"),
        label="Tooltip text",
    )          
)

if __name__ == '__main__':
    app.run(debug=True)

snehilvj / dash-mantine-components

[bug] react warning "Each child in a list should have a unique "key" prop." #380

Minimal example:

Warning: