title: How to render variable with HTML elements in ReactJs?
body: <p>Firstly I create a variable <code>liTagsPagination</code> with <code>&lt;a&gt;</code> elements depending on <code>sectionsXml</code> size array. And after that insert that variable into <code>htmlPagination</code>. And finally render <code>htmlPagination</code> variable with all html content. </p>
  
  <p>But the output in the view is only the content of <code>liTagsPagination</code> in plain text. In DOM the <code>liTagsPagination</code> is appended to <code>&lt;ul&gt;</code> but no as a different element. </p>
  
  <pre><code>render() {
   let liTagsPagination = "";
   this.state.sectionsXml.forEach(function(elementSection, indexSection) {
      liTagsPagination += "&lt;li&gt;&lt;a id=\"_sectionPage"+ indexSection +"\" className=\"section\"&gt;"+(indexSection+1)+"&lt;\/a&gt;&lt;\/li&gt;";
   });
  
   const htmlPagination = (
     &lt;div id="pages-nav-branch" className="col-xs-12 text-center"&gt;
         &lt;ul className="pagination pagination-section pagination-sm"&gt;
             {liTagsPagination}
         &lt;/ul&gt;
     &lt;/div&gt;
   );
  
   return(
      &lt;div&gt;
         {htmlPagination}
      &lt;/div&gt;
   )
  }
  </code></pre>