title: Dynamically create data table in ReactJS
body: <p>I have problem with creating dynamic data table in ReactJs. In state.data I get my data which I loop to create data table.</p>
  
  <p>Here is my render function:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>render: function() {
          return (
              &lt;div&gt;
                  &lt;table id="measurementsDataTable" className="row-border compact"&gt;
                      {
                          this.state.data.map(function(item) {
                              if( item.element == "th" ){
                                  return (
                                      &lt;thead&gt;
                                          &lt;tr&gt;
                                              &lt;ThElement width="280" data={item.description}/&gt;
                                              &lt;ThElement width="150" data={item.L1}/&gt;
                                          &lt;/tr&gt;
                                      &lt;/thead&gt;
                                  )
                              }
                              else if ( item.element == "tr" ) {
                                  return (
                                      &lt;tbody&gt;
                                          &lt;tr&gt;
                                              &lt;TdElement data={item.description}/&gt;
                                              &lt;TdElement data={item.L1}/&gt;
                                          &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                  )
                              }
                          })
                      }
  
                  &lt;/table&gt;
              &lt;/div&gt;
          );
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is the element "tbody" which is given to the every single "tr" row. And it should be just in first "tr" to last "tr".</p>
  
  <p>This would't be a problem if I could just return start of "tbody", but react doesn't allow that.</p>
  
  <p>Is there any elegant solution to that?</p>
  
  <p>Edit:
  Currently is HTML looking like this. All the difference is in the "tbody" element.</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Phase&lt;/td&gt;
          &lt;th&gt;L1&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Voltage&lt;/td&gt;
          &lt;td&gt;224.2&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Current&lt;/td&gt;
          &lt;td&gt;0.00 mA&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;    
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Phase 2&lt;/td&gt;
          &lt;th&gt;L2&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Voltage2&lt;/td&gt;
          &lt;td&gt;223.2&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Current2&lt;/td&gt;
          &lt;td&gt;0.00 mA&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>and It should looking like this:</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Phase&lt;/td&gt;
          &lt;th&gt;L1&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Voltage&lt;/td&gt;
          &lt;td&gt;224.2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Current&lt;/td&gt;
          &lt;td&gt;0.00 mA&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;    
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Phase 2&lt;/td&gt;
          &lt;th&gt;L2&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Voltage2&lt;/td&gt;
          &lt;td&gt;223.2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Current2&lt;/td&gt;
          &lt;td&gt;0.00 mA&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>