popcodeorg / popcodeorg/popcode
React key warning in development mode
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 191
- Forks
- 143
- Avg merge
- 4d 11h
- Merged PRs (30d)
- 5
Description
When developing, if you open a fresh Popcode environment and type <h1 into the HTML editor, the console displays this React warning:
Warning: Encountered two children with the same key, `unclosed-tag,8`. 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 ul (created by ErrorList)
in div (created by ErrorList)
in ErrorList (created by ErrorReport)
in div (created by ErrorReport)
in ErrorReport (created by Connect(ErrorReport))
in Connect(ErrorReport) (created by Output)
in div (created by Output)
in div (created by Output)
in Output (created by Workspace)
in div (created by Workspace)
in div (created by Workspace)
in main (created by Workspace)
in div (created by Workspace)
in Workspace (created by Connect(Workspace))
in Connect(Workspace) (created by Application)
in Provider (created by Application)
in Application
You don't see this in production since the warnings get stripped in the production version of React. Just wanted to note this—feel free to close if you already know about it or aren't worried about it.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the warning by opening a fresh Popcode environment and typing <h1 in the HTML editor. Start with the ErrorList component named in the React stack trace and inspect how its list items receive keys; done means the duplicate-key warning no longer appears in development.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100