storybookjs / react-inspector

🔍 Power of Browser DevTools inspectors right inside your React app
https://5d8cb665bc622e0020296079-dippbxxgcq.chromatic.com/
MIT License
769 stars 95 forks source link

Make root dom element of <Inspector> not <li> #53

Open ValentineStone opened 6 years ago

ValentineStone commented 6 years ago

<Inspector> component seems to be using <li> as a root dom node, so when the inspector is nested in another list item component React complains with the flowing message:

Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>

Below is the rendered dom tree which illustrates the problem:

image

Regardless of the React warning, according to MDN on <li> element:

Permitted parents: An <ul>, <ol>, or <menu> element.

So having <li> as root element is not a conforming usage anyhow ¯\_(ツ)_/¯

xyc commented 6 years ago

Make sense, will change it to <ol> or <div>

ndelangen commented 6 years ago

@ValentineStone if this has not been completed yet, it sounds like a pretty easy change. Would you like to help out, and build this feature?

ValentineStone commented 6 years ago

@ndelangen sure, I'll take a look at it within a couple of days)