title: React creating span where it shouldn't
body: <p>I have a component to show a sort of Table of Contents. I'm struggling with react for it is creating a span tag where, in my understanding, it shouldn't.</p>
  
  <p>The rendering functions is:</p>
  
  <pre><code>render() {
           return(
              &lt;ul&gt;
                  {
                      this.state.contents.map(function(li, i) {
  
                          let subItems = li.subItems.map(function(subLi, j) {
                              return (
                                  &lt;li&gt;
                                      &lt;span&gt;{subLi.title}&lt;/span&gt;
                                  &lt;/li&gt;
                              )
                          }, this);
  
                          return (
                              &lt;li tabIndex={i}&gt;
                                  &lt;span&gt;&lt;i class="fa fa-caret-right" /&gt;{li.title}&lt;/span&gt;
                                  &lt;ul class="subitens"&gt;
                                      {subItems}
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                          );
                      }, this)
                  }
              &lt;/ul&gt;
          );
  </code></pre>
  
  <p>The line <code>&lt;span&gt;&lt;i class="fa fa-caret-right" /&gt;{li.title}&lt;/span&gt;</code> is creating the following structure:</p>
  
  <pre><code>&lt;span&gt;
      &lt;i&gt;&lt;/i&gt;
      &lt;span&gt;Parent 1&lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>And I would like:</p>
  
  <pre><code>&lt;span&gt;&lt;i&gt;&lt;/i&gt; Parent 1&lt;/span&gt;
  </code></pre>
  
  <p>That <code>span</code> around my text is messing with my CSS. </p>
  
  <p>I wrapped it up on a fiddle: <a href="https://jsfiddle.net/fpcvzsLo/" rel="nofollow noreferrer">https://jsfiddle.net/fpcvzsLo/</a></p>
  
  <p>Any ideas on what am I getting wrong?</p>
  
  <p>Thanks!</p>