I keep getting this warning when testing a react-admin app:
Warning: Each child in a list should have a unique "key" prop.
Check the top-level render call using <SimpleForm>. See https://reactjs.org/link/warning-keys for more information.
at NumberInput (node_modules/ra-ui-materialui/src/input/NumberInput.tsx:23:14)
at CoreAdminRoutes (node_modules/ra-core/src/core/CoreAdminRoutes.tsx:18:42)
at RenderedRoute (node_modules/react-router/lib/hooks.tsx:624:26)
at Routes (node_modules/react-router/lib/components.tsx:410:3)
at CoreAdminUI (node_modules/ra-core/src/core/CoreAdminUI.tsx:54:14)
at div
at node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:43:23
at ScopedCssBaseline (node_modules/@mui/material/node/ScopedCssBaseline/ScopedCssBaseline.js:58:44)
at AdminUI (node_modules/ra-ui-materialui/src/AdminUI.tsx:14:39)
at ThemeProvider (node_modules/@mui/private-theming/node/ThemeProvider/ThemeProvider.js:39:5)
at ThemeProvider (node_modules/@mui/system/ThemeProvider/ThemeProvider.js:49:5)
at ThemeProvider (node_modules/@mui/material/node/styles/ThemeProvider.js:20:14)
at ThemeProvider (node_modules/ra-ui-materialui/src/layout/Theme/ThemeProvider.tsx:19:13)
at ResourceDefinitionContextProvider (node_modules/ra-core/src/core/ResourceDefinitionContext.tsx:46:5)
at NotificationContextProvider (node_modules/ra-core/src/notification/NotificationContextProvider.tsx:8:55)
at I18nContextProvider (node_modules/ra-core/src/i18n/I18nContextProvider.tsx:13:5)
at Router (node_modules/react-router/lib/components.tsx:328:13)
at HistoryRouter (node_modules/ra-core/src/routing/HistoryRouter.tsx:11:13)
at InternalRouter (node_modules/ra-core/src/routing/AdminRouter.tsx:39:13)
at BasenameContextProvider (node_modules/ra-core/src/routing/BasenameContextProvider.tsx:12:51)
at AdminRouter (node_modules/ra-core/src/routing/AdminRouter.tsx:14:12)
at QueryClientProvider (node_modules/react-query/lib/react/QueryClientProvider.js:45:21)
at PreferencesEditorContextProvider (node_modules/ra-core/src/preferences/PreferencesEditorContextProvider.tsx:8:60)
at StoreContextProvider (node_modules/ra-core/src/store/StoreContextProvider.tsx:7:17)
at CoreAdminContext (node_modules/ra-core/src/core/CoreAdminContext.tsx:54:14)
at AdminContext (node_modules/ra-ui-materialui/src/AdminContext.tsx:8:62)
at Admin (node_modules/react-admin/src/Admin.tsx:115:14)
at App (src/App.js:480:18)
It occurs in this code:
<Create redirect="show">
<SimpleForm sanitizeEmptyValues warnWhenUnsavedChanges>
{createInputs(resource, name, "add", permissions)}
</SimpleForm>
</Create>
createInputs()
returns an array created like:
components.push(<C {...props} />);
C
is NumberInput
, TextInput
or similar.
When I console log, it shows that key=null. Yet, if I tweak it to <C key={null} {...props} />
, then the warning disappears.
What is happening here and is there a better approach to fix it? I don’t see anything in the react-admin documentation about a key prop, so I’m not sure why I’d need to specify it.
2
Answers
react processes every node of the DOM using this unique key, if you are mapping array then give unique value in the key attribute
[].map(item,i)=><p key{i}></p>
When using an imported component you are effectively creating a new instance of that component which can be done multiple times. React DOM notices this and to preemptively avoid issues it will warn to add a key in order to help the DOM differentiate each child or instance created.
Without a key the parent component could create 1-1000+ instances such as a mapping. If there is no unique key then the DOM will possibly have issues during re-renders, updates, state changes and ref logic.
You can avoid this by adding a key=’uniqueIdentifier’ for any HTML elements within children that are iterated over or instantiated.