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