Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Getting `two children with the same key` error when using pagination

See original GitHub issue

Describe the bug (required) If I set my max row count per page to 5, as soon as I add the 6th row, I get this error: Warning: Encountered two children with the same key, 5.

If I set the max row count per page to to 10, I would get the same warning for key 10.

Provide an example via Codesandbox! (required) https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination?file=/src/App.js:1974-2008

https://github.com/stliang/ferrorod/blob/415c86ad95081355ee2f215732ec192325b736ae/src/scenes/components/TablePage/components/MuiReactTable/index.js#L262

          {page.map((row, i) => {
            prepareRow(row)
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                })}

Steps To Reproduce (required) Steps to reproduce the behavior:

  1. Given a pagination table, set max row per page to 5
  2. Bring up developer tool and monitor the console tab
  3. Add the 6th row and see if the warning comes out

Expected behavior (Recommended) Expecting no warning to the pagination code. There should be a way to set the ID value so the ID can be unique.

Screenshots

Warning: Encountered two children with the same key, `5`. 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.
    in select (created by ForwardRef(NativeSelectInput))
    in ForwardRef(NativeSelectInput) (created by ForwardRef(InputBase))
    in div (created by ForwardRef(InputBase))
    in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(Select))
    in ForwardRef(Select) (created by WithStyles(ForwardRef(Select)))
    in WithStyles(ForwardRef(Select)) (created by ForwardRef(TablePagination))
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar)) (created by ForwardRef(TablePagination))
    in td (created by ForwardRef(TableCell))
    in ForwardRef(TableCell) (created by WithStyles(ForwardRef(TableCell)))
    in WithStyles(ForwardRef(TableCell)) (created by ForwardRef(TablePagination))
    in ForwardRef(TablePagination) (created by WithStyles(ForwardRef(TablePagination)))
    in WithStyles(ForwardRef(TablePagination)) (at MuiReactTable/index.js:293)
    in tr (created by ForwardRef(TableRow))
    in ForwardRef(TableRow) (created by WithStyles(ForwardRef(TableRow)))
    in WithStyles(ForwardRef(TableRow)) (at MuiReactTable/index.js:279)
    in tfoot (created by ForwardRef(TableFooter))
    in ForwardRef(TableFooter) (created by WithStyles(ForwardRef(TableFooter)))
    in WithStyles(ForwardRef(TableFooter)) (at MuiReactTable/index.js:278)
    in table (created by ForwardRef(Table))
    in ForwardRef(Table) (created by WithStyles(ForwardRef(Table)))
    in WithStyles(ForwardRef(Table)) (at MuiReactTable/index.js:244)
    in div (created by ForwardRef(TableContainer))
    in ForwardRef(TableContainer) (created by WithStyles(ForwardRef(TableContainer)))
    in WithStyles(ForwardRef(TableContainer)) (at MuiReactTable/index.js:232)
    in MuiReactTable (at TablePage/index.js:66)
    in TablePage (at Assets/index.js:9)
    in Assets (at Router/index.js:14)
    in Route (at Router/index.js:10)
    in PrivilegedRoute (at Router/index.js:26)
    in Switch (at Router/index.js:24)
    in Router (at ContentEx/index.js:24)
    in div (at ContentEx/index.js:23)
    in ContentEx (created by WithStyles(ContentEx))
    in WithStyles(ContentEx) (at Main/index.js:85)
    in main (created by ProxyComponent)
    in ProxyComponent (created by StyledComponent)
    in StyledComponent (created by Content)
    in Content (at Main/index.js:84)
    in Layout (created by Root)
    in LayoutProvider (created by Root)
    in ThemeProvider (created by Root)
    in Root (at Main/index.js:67)
    in Main (at src/index.js:20)
    in Router (created by MemoryRouter)
    in MemoryRouter (at src/index.js:19)
    in UserDataContextProvider (at src/index.js:18)
    in UserContextProvider (at src/index.js:17)
    in FirebaseContextProvider (at src/index.js:16)
    in App (at src/index.js:28)
console.<computed> @ index.js:1
overrideMethod @ react_devtools_backend.js:2430
printWarning @ react-dom.development.js:88
error @ react-dom.development.js:60
warnOnInvalidKey @ react-dom.development.js:13801
reconcileChildrenArray @ react-dom.development.js:13832
reconcileChildFibers @ react-dom.development.js:14305
reconcileChildren @ react-dom.development.js:16769
updateHostComponent @ react-dom.development.js:17302
beginWork @ react-dom.development.js:18627
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
dispatchAction @ react-dom.development.js:15660
(anonymous) @ UserDataContextProvider.js:30
next @ index.cjs.js:15685
(anonymous) @ index.cjs.js:13350
setTimeout (async)
t.t_ @ index.cjs.js:13349
t.next @ index.cjs.js:13342
t.Qs @ index.cjs.js:5595
Lr @ index.cjs.js:5538
(anonymous) @ index.cjs.js:11735
step @ tslib.es6.js:100
(anonymous) @ tslib.es6.js:81
fulfilled @ tslib.es6.js:71
Promise.then (async)
step @ tslib.es6.js:73
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
Ds @ index.cjs.js:11719
(anonymous) @ index.cjs.js:14716
step @ tslib.es6.js:100
(anonymous) @ tslib.es6.js:81
fulfilled @ tslib.es6.js:71
Promise.then (async)
step @ tslib.es6.js:73
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
(anonymous) @ index.cjs.js:14670
(anonymous) @ index.cjs.js:14732
(anonymous) @ index.cjs.js:5363
Promise.then (async)
e.vs @ index.cjs.js:5362
e.enqueue @ index.cjs.js:5299
e.ds @ index.cjs.js:5271
e.write @ index.cjs.js:14668
n.set @ index.cjs.js:15281
n.add @ index.cjs.js:15829
(anonymous) @ UserDataContextProvider.js:126
(anonymous) @ compose.js:8
(anonymous) @ defineUnion.js:26
curried @ curry.js:32
either @ Maybe.js:92
(anonymous) @ Maybe.js:142
insertRow @ UserDataContextProvider.js:124
addRowHandler @ index.js:205
handleAdd @ index.js:43
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
executeDispatch @ react-dom.development.js:389
executeDispatchesInOrder @ react-dom.development.js:414
executeDispatchesAndRelease @ react-dom.development.js:3278
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287
forEachAccumulated @ react-dom.development.js:3259
runEventsInBatch @ react-dom.development.js:3304
runExtractedPluginEventsInBatch @ react-dom.development.js:3514
handleTopLevel @ react-dom.development.js:3558
batchedEventUpdates$1 @ react-dom.development.js:21871
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
Show 37 more frames
3index.js:1 Warning: Encountered two children with the same key, `5`. 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.
    in select (created by ForwardRef(NativeSelectInput))
    in ForwardRef(NativeSelectInput) (created by ForwardRef(InputBase))
    in div (created by ForwardRef(InputBase))
    in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(Select))
    in ForwardRef(Select) (created by WithStyles(ForwardRef(Select)))
    in WithStyles(ForwardRef(Select)) (created by ForwardRef(TablePagination))
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar)) (created by ForwardRef(TablePagination))
    in td (created by ForwardRef(TableCell))
    in ForwardRef(TableCell) (created by WithStyles(ForwardRef(TableCell)))
    in WithStyles(ForwardRef(TableCell)) (created by ForwardRef(TablePagination))
    in ForwardRef(TablePagination) (created by WithStyles(ForwardRef(TablePagination)))
    in WithStyles(ForwardRef(TablePagination)) (at MuiReactTable/index.js:293)
    in tr (created by ForwardRef(TableRow))
    in ForwardRef(TableRow) (created by WithStyles(ForwardRef(TableRow)))
    in WithStyles(ForwardRef(TableRow)) (at MuiReactTable/index.js:279)
    in tfoot (created by ForwardRef(TableFooter))
    in ForwardRef(TableFooter) (created by WithStyles(ForwardRef(TableFooter)))
    in WithStyles(ForwardRef(TableFooter)) (at MuiReactTable/index.js:278)
    in table (created by ForwardRef(Table))
    in ForwardRef(Table) (created by WithStyles(ForwardRef(Table)))
    in WithStyles(ForwardRef(Table)) (at MuiReactTable/index.js:244)
    in div (created by ForwardRef(TableContainer))
    in ForwardRef(TableContainer) (created by WithStyles(ForwardRef(TableContainer)))
    in WithStyles(ForwardRef(TableContainer)) (at MuiReactTable/index.js:232)
    in MuiReactTable (at TablePage/index.js:66)
    in TablePage (at Assets/index.js:9)
    in Assets (at Router/index.js:14)
    in Route (at Router/index.js:10)
    in PrivilegedRoute (at Router/index.js:26)
    in Switch (at Router/index.js:24)
    in Router (at ContentEx/index.js:24)
    in div (at ContentEx/index.js:23)
    in ContentEx (created by WithStyles(ContentEx))
    in WithStyles(ContentEx) (at Main/index.js:85)
    in main (created by ProxyComponent)
    in ProxyComponent (created by StyledComponent)
    in StyledComponent (created by Content)
    in Content (at Main/index.js:84)
    in Layout (created by Root)
    in LayoutProvider (created by Root)
    in ThemeProvider (created by Root)
    in Root (at Main/index.js:67)
    in Main (at src/index.js:20)
    in Router (created by MemoryRouter)
    in MemoryRouter (at src/index.js:19)
    in UserDataContextProvider (at src/index.js:18)
    in UserContextProvider (at src/index.js:17)
    in FirebaseContextProvider (at src/index.js:16)
    in App (at src/index.js:28)

Desktop (please complete the following information):

  • OS: iOS
  • Browser chrome
  • Version “react-table”: “7.6.2”

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
tlowandecommented, May 19, 2021

@hyx131 check this out ^

1reaction
tlowandecommented, Jan 26, 2021

Just would like to support this issue for further investigation cause I’m experiencing the same. It only shows this alert when my data has the exact same length as one of the values in my pagination ui though. repo https://github.com/EQWorks/lumen-table

Read more comments on GitHub >

github_iconTop Results From Across the Web

Getting `two children with the same key` error when using ...
Expected behavior (Recommended)​​ Expecting no warning to the pagination code. There should be a way to set the ID value so the ID...
Read more >
Encountered Two Children with the Same Key — React Fix
Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
Read more >
Encountered two children with the same key, `NaN` - Data Tab
It uses property name to set key of the Pagination Item, so if you do not have field named name in your data...
Read more >
Encountered two children with the same key. keys should be ...
I am fetching github users in my reactjs web app. On searching user second time I find the pagination appearing ...
Read more >
[Solved]-Encountered two children with the same key-Reactjs
Coding example for the question Encountered two children with the same key-Reactjs. ... How to get URL params when using Custom Document in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

(TypeScript) Type definitions are incomplete for sortable tables.

Next page

Property 'getResizerProps' does not exist on type 'HeaderGroup<object>'