title: Is there an HTML "dummy" tag to group other elements without interfering with parent-child CSS rules?
body: <p>I am using Bootstrap, which defines a set of CSS rules. I am trying to use React to render my application, but it always needs a wrapper element, I can't just render an array of elements.</p>
  
  <p>This is not valid:</p>
  
  <pre><code>class MyClass extends React.Component {
      render() {
          return (
              &lt;li&gt;&lt;/li&gt;
              &lt;li&gt;&lt;/li&gt;
          );
      }
  }
  </code></pre>
  
  <p>But this is:</p>
  
  <pre><code>class MyClass extends React.Component {
      render() {
          return (
              &lt;ul&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
              &lt;/ul&gt;
          );
      }
  }
  </code></pre>
  
  <p>In my specific case, I already have a <code>&lt;ul&gt;</code> outside, I just need to render a lot of <code>&lt;li&gt;</code>s inside. If I use a wrapper tag, it will break Bootstrap rules.</p>
  
  <p>Is there some dummy HTML tag to do this? If not, why?</p>
  
  <hr>
  
  <p>I will explain better my issue. I have this structure (it's a Bootstrap navbar):</p>
  
  <pre><code>&lt;ul class="nav navbar-nav navbar-right"&gt;
    &lt;!-- a bunch of &lt;li&gt; generated by AngularJS --&gt;
  
    &lt;!-- for example, the following my be generated: --&gt;
    &lt;li class="dropdown"&gt;
      &lt;a class="dropdown-toggle" data-toggle="dropdown"&gt;Menu 1&lt;/a&gt;
      &lt;ul class="dropdown-menu"&gt;
        &lt;li&gt;
          &lt;a&gt;Menu 1 Item 1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a&gt;Menu 1 Item 2&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  
    &lt;!-- now, the following is the React component I want to add --&gt;
    &lt;li class="dropdown"&gt;
      &lt;a class="dropdown-toggle" data-toggle="dropdown"&gt;React Menu&lt;/a&gt;
      &lt;ul class="dropdown-menu" id="my-react-component"&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>To create it, I am doing:</p>
  
  <pre><code>class MyComponent extends React.Component {
      render() {
          let x = [];
          for (let lang of langlist) {
              x.push(
                &lt;li&gt;
                  ..stuff..
                &lt;/li&gt;
              );
          }
  
          return (
              &lt;something&gt;
                  {x}
              &lt;/something&gt;
          );
      }
  }
  </code></pre>
  
  <p>I also tried to restructure it like this:</p>
  
  <pre><code>&lt;ul class="nav navbar-nav navbar-right"&gt;
    ...
  
    &lt;!-- now, the following is the React component I want to add --&gt;
    &lt;li class="dropdown" id="my-react-component"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And:</p>
  
  <pre><code>class MyComponent extends React.Component {
      render() {
          let x = [];
          for (let lang of langlist) {
              x.push(
                &lt;li&gt;
                  ..stuff..
                &lt;/li&gt;
              );
          }
  
          return (
              &lt;a class="dropdown-toggle" data-toggle="dropdown"&gt;React Menu&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                  {x}
              &lt;/ul&gt;
          );
      }
  }
  </code></pre>
  
  <p>But as you can see I then need another wrapper element, and I can't do it if I want to keep Angular and React.</p>