0

I use react 0.13.3 with babel 5.8.26. I noticed it started rendering strange markup. This is what I have in js file:

<p className="navbar-text navbar-right dropdown hidden-xs">
    <a className="navbar-link dropdown-toggle" href="#" id="accountddl" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i className="st st-profile st-2"></i></a>
    <ul className="dropdown-menu" aria-labelledby="accountddl">
        <li><a href="#">Action</a></li>
    </ul>
</p>

You can see the output there.

But what it renders back is this:

<p class="navbar-text navbar-right dropdown hidden-xs" data-reactid=".0">
    <a class="navbar-link dropdown-toggle" href="#" id="accountddl" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data-reactid=".0.0">
        <i class="st st-profile st-2" data-reactid=".0.0.0"/>
    </a>
</p>
<ul class="dropdown-menu" aria-labelledby="accountddl" data-reactid=".0.1">
    <li data-reactid=".0.1.0">
        <a href="#" data-reactid=".0.1.0.0">Action</a>
    </li>
</ul>
<p/>

As you can see it closes the p tag before rendering ul and in the end it attaches a self-closed p tag.

How to make ul a part of one parent p tag? Am I doing something wrong?

If I change p to div it works as expected - result

Update

Thanks to the guys comments. I realized that this is not valid HTML. React is good and does its job well. So, when the browser sees the case, it decides to break it the way shown above.

Andrey Borisko
  • 4,511
  • 2
  • 22
  • 31
  • The only thing i can think of is that a List isn't intended to be INSIDE of a P. See here: http://stackoverflow.com/questions/5681481/should-ol-ul-be-inside-p-or-outside – josephnvu Oct 05 '15 at 19:23
  • ah, makes sense. so, there is a rule for that in react lib somewhere... thanks! – Andrey Borisko Oct 05 '15 at 19:40
  • 1
    Please include the code in the question itself. Linking out to the Babel REPL is cool, but the question should still be readable on its own. – loganfsmyth Oct 05 '15 at 20:06

1 Answers1

1

The HTML spec defines rules for how markup may be nested. In this case:

<p> is:

Content categories: Flow content, palpable content.

Permitted content: Phrasing content.

<ul> is:

Content categories: Flow content

Permitted parent elements: any element that accept flowing content

which translates to <ul> elements not being allowed within <p> elements. To avoid this, React and/or the browser will basically pull the <ul> one level up in the DOM and split the <p> around it, resulting in what you are seeing.

Update

From the release notes of the newly released React 0.14:

React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates.

Community
  • 1
  • 1
loganfsmyth
  • 156,129
  • 30
  • 331
  • 251