Dynamically create data table in ReactJS
<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>