[DevTools Bug]: Newline in component key string will look odd in component tree

Website or app

/

Repro steps

Create an element with a key like Foo\n\n\n\nBar\n\n\n\nBaz and it will occupy multiple lines in the component tab.

<div className='App'>
  <h1 key="0-hello\nworld\nfoo\nbar\nbaz">Hello React.</h1>
  <h1 key="1-hello\nworld\nfoo\nbar\nbaz">Hello React.</h1>
</div>

Here's a screenshot:

Background: I've worked on a syntax-highlighter which adds a for each section of text that's colored differently.
As key, I use the index of the element, it's format name and the actual content of the element.
The content can contain whitespaces or blank lines. It can also be very long strings.

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[github-actions]

@JannikGM: We're sorry you've seen this error. ❤️

It looks like you forgot to specify a valid URL. (This means that we will not be able to reproduce the problem you're reporting.)

Please help us by providing a link to a CodeSandbox (https://codesandbox.io/s/new), a repository on GitHub, or a minimal code example that reproduces the problem. (Screenshots or videos can also be helpful if they help provide context on how to repro the bug.)

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

Issues without repros are automatically closed but we will re-open if you update with repro info.

[hoxyq]

Looks like a good first-time issue for React DevTools: key should be sanitized before displaying in component tree