keystonejs / keystonejs/keystone

React unique keys console error when adding group field wrapper

Open
#9,201 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
10k
Forks
1.3k
Avg merge
19h 14m
Merged PRs (30d)
19

Description

Reverting this back to an issue, I accidentally moved it to a GitHub discussion.

Originally posted by **ARkrOSClou** July 4, 2024

React unique keys console error when adding [group](https://keystonejs.com/docs/fields/overview#groups) field wrapper

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

Check the render method of `Fields`. See https://reactjs.org/link/warning-keys for more information.
at FieldGroup (webpack-internal:///../../node_modules/@keystone-6/core/dist/Fields-cb2c206c.esm.js:123:69)
at Fields (webpack-internal:///../../node_modules/@keystone-6/core/dist/Fields-cb2c206c.esm.js:45:3)
at div
at eval (webpack-internal:///../../node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
at eval (webpack-internal:///../../node_modules/@keystone-ui/core/dist/keystone-ui-core.esm.js:1082:11)
at ItemForm (webpack-internal:///../../node_modules/@keystone-6/core/___internal-do-not-…ternal-do-not-use-will-break-in-patch-admin-ui-pages-ItemPage.esm.js:114:3)
at div
at eval (webpack-internal:///../../node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
at div
at eval (webpack-internal:///../../node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
at Container (webpack-internal:///../../node_modules/@keystone-6/core/dist/common-e09bab7f.esm.js:24:3)
at eval (webpack-internal:///../../node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
at ColumnLayout (webpack-internal:///../../node_modules/@keystone-6/core/dist/common-e09bab7f.esm.js:86:66)
at main
at eval (webpack-internal:///../../node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
at Content (webpack-internal:///../../node_modules/@keystone-6/core/dist/PageContainer-c874da2e.esm.js:358:66)
at div
at eval (webpack-internal:///../../node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
at PageWrapper
at PageContainer (webpack-internal:///../../node_modules/@keystone-6/core/dist/PageContainer-c874da2e.esm.js:374:3)
at ItemPage (webpack-internal:///../../node_modules/@keystone-6/core/___internal-do-not-…ternal-do-not-use-will-break-in-patch-admin-ui-pages-ItemPage.esm.js:363:3)
at ErrorBoundary (webpack-internal:///../../node_modules/@keystone-6/core/dist/Errors-790aea8c.esm.js:20:5)
at DrawerProvider (webpack-internal:///../../node_modules/@keystone-ui/modals/dist/keystone-ui-modals.esm.js:54:5)
at ToastProvider (webpack-internal:///../../node_modules/@keystone-ui/toast/dist/keystone-ui-toast.esm.js:41:5)
at InternalKeystoneProvider (webpack-internal:///../../node_modules/@keystone-6/core/admin-ui/context/dist/keystone-6-core-admin-ui-context.esm.js:313:3)
at ApolloProvider (webpack-internal:///../../node_modules/@apollo/client/react/context/ApolloProvider.js:14:21)
at KeystoneProvider (webpack-internal:///../../node_modules/@keystone-6/core/admin-ui/context/dist/keystone-6-core-admin-ui-context.esm.js:362:14)
at Core (webpack-internal:///../../node_modules/@keystone-ui/core/dist/keystone-ui-core.esm.js:1304:5)
at eval (webpack-internal:///../../node_modules/@keystone-6/core/___internal-do-not-…-___internal-do-not-use-will-break-in-patch-admin-ui-pages-App.esm.js:84:3)
at PathnameContextProviderAdapter (webpack-internal:///../../node_modules/next/dist/shared/lib/router/adapters.js:79:11)
at ErrorBoundary (webpack-internal:///../../node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:5389)
at ReactDevOverlay (webpack-internal:///../../node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:7785)
at Container (webpack-internal:///../../node_modules/next/dist/client/index.js:78:1)
at AppContainer (webpack-internal:///../../node_modules/next/dist/client/index.js:182:11)
at Root (webpack-internal:///../../node_modules/next/dist/client/index.js:396:11)
```

node: v18.18
"@keystone-6/auth": "8.0.0"
"@keystone-6/core": "6.1.0"

Contributor guide

Open the contributing guide

Research direction

Reproduce the warning by adding a group field wrapper, then inspect the Fields render method and FieldGroup entry point named in the stack trace. Confirm the fix by rendering the grouped fields without the React unique-key console warning.

Written by the indexing model from the issue text.

Assessment

Tech stack
node.js, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.