Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – What causes unique key prop warning in react-admin?

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.

Tags:

2

Answers


  1. 0

    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>

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search