[DevTools Bug] Children cannot be added or removed during a reorder operation.

[HamaydaGabsi]

Website or app

https://github.com/HamaydaGabsi/Color-Project

Repro steps

1. Select a palette
2. Select to color to view shades
3. Go back to the colors with the navigation arrow

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.25.0-336ac8ceb

Error message (automated)

Children cannot be added or removed during a reorder operation.

Error call stack (automated)

at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:26848:41
    at bridge_Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24626:22)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24795:14
    at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:54959:39)

Error component stack (automated)

No response

GitHub query string (automated)

https://api.github.com/search/issues?q=Children cannot be added or removed during a reorder operation. in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

[lunaruan]

Hey! I tried to test out your project, but I only see the create react app logo.

could you upload a version of your app on github or codesandbox so we can debug further? Thanks!

[hanswang123456]

Is your app something that resembles this? https://reactjsexample.com/create-a-make-your-own-color-palette-app-using-react-framework/ --->github: https://github.com/Colt/react-colors

[j56xie]

I've runned into the same issue recently and mine was caused by duplicate keys when mapping a list of items into renders function. Fixed the issue by update keys to use unique identifier.

[MidnightTinge]

Just had this pop on our codebase while refactoring some old code. This seems to be an issue with rendering sub-components with duplicate keys in the devtools. I've uploaded an MRE here: https://github.com/MidnightTinge/gh-react-25007

The way to trigger the error is to flip the <Item/> component's key prop value from key to value. This should trigger the error, and the button on the page automates this process.

After re-reading I realized my naming was probably confusing. To trigger the specific error, the keys need to go from duplicate to non-duplicate while the devtools are open.

[hrasekh]

I had the same issue and it was because I had multiple list item with the same key value, so during the update it was behaving incorrectly and throwing this error.

[navneetMukrah]

I also had the same issue i fixed it by giving unique id to key .

[ChichebeDarlington]

unique id is the solution, just fix mine now

[HamaydaGabsi]

I've runned into the same issue recently and mine was caused by duplicate keys when mapping a list of items into renders function. Fixed the issue by update keys to use unique identifier. This is the solution

[MidnightTinge]

not having duplicate keys is react 101 (and an easy mistake to make, I still oppsie that one myself sometimes while prototyping 😁) so while it may mask the underlying issue, this is technically not resolved until devtools specifically don't report it as a problem. this doesn't appear to be anywhere on the team's radar, but the ticket should probably stay open until that happens