MDL + React: Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>. See Registration > li > ... > li

[geoyws]

Apparently React doesn't like nested components that don't have keys that make them distinguishable for its Virtual DOM. Could you guys just generate keys automatically for these elements in the next release?

[Garbee]

We do not provide react components. The demos exist in V2 are just for example purposes and may fall behind at times as they are not a priority to keep updated until we get a milestone release out for testing.

I'd assume you are using a a third-party wrapper for MDL to provide React components. If so, please get in touch with the creator of that library. If this is somehow a problem internal to MDL then provide more details on what exactly you are doing with our code (live examples very useful here) and we can assess the problem from there to see if any action should be taken.

Thank you.

[geoyws]

Sorry I forgot to mention that I just used .mdl-layout and .mdl-layout__drawer and that builds markup that has nested <li/>s that makes React throw warnings. Perhaps it's just good to be informed that React's Virtual DOM doesn't like it.

[Atmiya735]

Facing same issue when i try to use< li> in React Tabs

<TabList>
 	<ul className="nav nav-tabs" role="tablist">
     	<Tab>
    		<li role="presentation" className="main-tab ">
		      	Sections
		    </li>
  		</Tab>
  		<Tab>
    		<li role="presentation" className="main-tab">
      			General settings
    		</li>
  		</Tab>
	</ul>
</TabList>

[jmhouzz]

@Atmiya735 I think the warning is merely pointing out the HTML nesting is invalid.

Permitted content of ul is: “Zero or more <li>, <script> and <template> elements.” see MDN docs
For the record, permitted content of li is a flow content which li itself is not, hence the warning in the other cases.