React Keys Tutorial: Understanding and Fixing Common Key Warnings 📚 Introduction In this tutorial, we’ll explore React keys – what… Read More »App.tsx:183 App rendering AppLayout App.tsx:119 renderContent: stepmap StepMap.tsx:476 Each child in a list should have a unique “key” prop. Check the render method of `div`. It was passed a child from StepMap. See https://react.dev/link/warning-keys for more information. (anonymous) @ react-dom-client.development.js:26084 runWithFiberInDEV @ react-dom-client.development.js:871 warnForMissingKey @ react-dom-client.development.js:26083 warnOnInvalidKey @ react-dom-client.development.js:6591 reconcileChildrenArray @ react-dom-client.development.js:6672 reconcileChildFibersImpl @ react-dom-client.development.js:6993 (anonymous) @ react-dom-client.development.js:7098 reconcileChildren @ react-dom-client.development.js:9701 beginWork @ react-dom-client.development.js:12126 runWithFiberInDEV @ react-dom-client.development.js:871 performUnitOfWork @ react-dom-client.development.js:17641 workLoopSync @ react-dom-client.development.js:17469 renderRootSync @ react-dom-client.development.js:17450 performWorkOnRoot @ react-dom-client.development.js:16504 performSyncWorkOnRoot @ react-dom-client.development.js:18972 flushSyncWorkAcrossRoots_impl @ react-dom-client.development.js:18814 processRootScheduleInMicrotask @ react-dom-client.development.js:18853 (anonymous) @ react-dom-client.development.js:18991
exports.jsxDEV @ react-jsx-dev-runtime.development.js:335 (anonymous) @ StepMap.tsx:476 StepMap @ StepMap.tsx:471 react_stack_bottom_frame @ react-dom-client.development.js:25904 renderWithHooksAgain @ react-dom-client.development.js:7762 renderWithHooks @ react-dom-client.development.js:7674 updateFunctionComponent @ react-dom-client.development.js:10166 beginWork @ react-dom-client.development.js:11778 runWithFiberInDEV @ react-dom-client.development.js:871 performUnitOfWork @ react-dom-client.development.js:17641 workLoopSync @ react-dom-client.development.js:17469 renderRootSync @ react-dom-client.development.js:17450 performWorkOnRoot @ react-dom-client.development.js:16504 performSyncWorkOnRoot @ react-dom-client.development.js:18972 flushSyncWorkAcrossRoots_impl @ react-dom-client.development.js:18814 processRootScheduleInMicrotask @ react-dom-client.development.js:18853 (anonymous) @ react-dom-client.development.js:18991
exports.jsxDEV @ react-jsx-dev-runtime.development.js:335 renderContent @ App.tsx:132 App @ App.tsx:186 react_stack_bottom_frame @ react-dom-client.development.js:25904 renderWithHooksAgain @ react-dom-client.development.js:7762 renderWithHooks @ react-dom-client.development.js:7674 updateFunctionComponent @ react-dom-client.development.js:10166 beginWork @ react-dom-client.development.js:11778 runWithFiberInDEV @ react-dom-client.development.js:871 performUnitOfWork @ react-dom-client.development.js:17641 workLoopSync @ react-dom-client.development.js:17469 renderRootSync @ react-dom-client.development.js:17450 performWorkOnRoot @ react-dom-client.development.js:16504 performWorkOnRootViaSchedulerTask @ react-dom-client.development.js:18957 performWorkUntilDeadline @ scheduler.development.js:45 exports.jsxDEV @ react-jsx-dev-runtime.development.js:335 (anonymous) @ main.tsx:9 3StepMap.tsx:660 Encountered two children with the same key, `mini-undefined`. 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. (anonymous) @ react-dom-client.development.js:6604 runWithFiberInDEV @ react-dom-client.development.js:871 warnOnInvalidKey @ react-dom-client.development.js:6603 reconcileChildrenArray @ react-dom-client.development.js:6672 reconcileChildFibersImpl @ react-dom-client.development.js:6993 (anonymous) @ react-dom-client.development.js:7098 reconcileChildren @ react-dom-client.development.js:9701 beginWork @ react-dom-client.development.js:12049 runWithFiberInDEV @ react-dom-client.development.js:871 performUnitOfWork @ react-dom-client.development.js:17641 workLoopSync @ react-dom-client.development.js:17469 renderRootSync @ react-dom-client.development.js:17450 performWorkOnRoot @ react-dom-client.development.js:16504 performSyncWorkOnRoot @ react-dom-client.development.js:18972 flushSyncWorkAcrossRoots_impl @ react-dom-client.development.js:18814 processRootScheduleInMicrotask @ react-dom-client.development.js:18853 (anonymous) @ react-dom-client.development.js:18991 exports.jsxDEV @ react-jsx-dev-runtime.development.js:335 (anonymous) @ StepMap.tsx:660 StepMap @ StepMap.tsx:655 react_stack_bottom_frame @ react-dom-client.development.js:25904 renderWithHooksAgain @ react-dom-client.development.js:7762 renderWithHooks @ react-dom-client.development.js:7674 updateFunctionComponent @ react-dom-client.development.js:10166 beginWork @ react-dom-client.development.js:11778 runWithFiberInDEV @ react-dom-client.development.js:871 performUnitOfWork @ react-dom-client.development.js:17641 workLoopSync @ react-dom-client.development.js:17469 renderRootSync @ react-dom-client.development.js:17450 performWorkOnRoot @ react-dom-client.development.js:16504 performSyncWorkOnRoot @ react-dom-client.development.js:18972 flushSyncWorkAcrossRoots_impl @ react-dom-client.development.js:18814 processRootScheduleInMicrotask @ react-dom-client.development.js:18853 (anonymous) @ react-dom-client.development.js:18991 exports.jsxDEV @ react-jsx-dev-runtime.development.js:335 renderContent @ App.tsx:132 App @ App.tsx:186 react_stack_bottom_frame @ react-dom-client.development.js:25904 renderWithHooksAgain @ react-dom-client.development.js:7762 renderWithHooks @ react-dom-client.development.js:7674 updateFunctionComponent @ react-dom-client.development.js:10166 beginWork @ react-dom-client.development.js:11778 runWithFiberInDEV @ react-dom-client.development.js:871 performUnitOfWork @ react-dom-client.development.js:17641 workLoopSync @ react-dom-client.development.js:17469 renderRootSync @ react-dom-client.development.js:17450 performWorkOnRoot @ react-dom-client.development.js:16504 performWorkOnRootViaSchedulerTask @ react-dom-client.development.js:18957 performWorkUntilDeadline @ scheduler.development.js:45 exports.jsxDEV @ react-jsx-dev-runtime.development.js:335 (anonymous) @ main.tsx:9
