title: looping over array with thead and tbody tags in react
body: <p>I am trying to add thead and tbody tags to my table in react. The source data is one array where the first index contains the header and the rest is the table body.</p>
  
  <pre><code>    return (
        &lt;div&gt;
          {index == 1 &amp;&amp; &lt;tbody&gt;}
        &lt;tr key={index}&gt;
          {tableData(false, row.value)}
        &lt;/tr&gt;
          {index == pivot.data.table.length &amp;&amp; &lt;/tbody&gt;}
        &lt;/div&gt;
      );
  </code></pre>
  
  <p>Within the loop above I get unexpected token at <code>{index == pivot.data.table.length &amp;&amp; &lt;/tbody&gt;}</code> </p>
  
  <p>Full code and sandbox are below:</p>
  
  <pre><code>import React, { Component } from "react";
  import { render } from "react-dom";
  import Pivot from "quick-pivot";
  import { Table } from 'react-bootstrap';
  
  class PivotTable extends Component {
    constructor(props) {
      super(props);
    }
  
    createTable() {
      const dataArray = [
        ["name", "gender", "house", "age"],
        ["Jon", "m", "Stark", 14],
        ["Arya", "f", "Stark", 10],
        ["Cersei", "f", "Baratheon", 38],
        ["Tywin", "m", "Lannister", 67],
        ["Tyrion", "m", "Lannister", 34],
        ["Joffrey", "m", "Baratheon", 18],
        ["Bran", "m", "Stark", 8],
        ["Jaime", "m", "Lannister", 32],
        ["Sansa", "f", "Stark", 12]
      ];
  
      const rowsToPivot = ["name"];
      const colsToPivot = ["house", "gender"];
      const aggregationDimension = "age";
      const aggregator = "sum";
  
      const pivot = new Pivot(
        dataArray,
        rowsToPivot,
        colsToPivot,
        aggregationDimension,
        aggregator
      );
  
      console.log("pivot.data", pivot.data, "pivot.data.table", pivot.data.table);
      const tableData = (heading, row) =&gt; {
        return row.map(cell =&gt; {
          if (heading) {
            return (
              &lt;th&gt;
                {cell}
              &lt;/th&gt;
            );
          } else {
            return (
              &lt;td&gt;
                {cell}
              &lt;/td&gt;
            );
          }
        });
      };
  
      return pivot.data.table.map((row, index) =&gt; {
        if (index == 0) {
          return (
            &lt;thead&gt;
              &lt;tr key={index}&gt;
                {tableData(true, row.value)}
              &lt;/tr&gt;
            &lt;/thead&gt;
          );
        } else {
          return (
            &lt;div&gt;
              {index == 1 &amp;&amp; &lt;tbody&gt;}
            &lt;tr key={index}&gt;
              {tableData(false, row.value)}
            &lt;/tr&gt;
              {index == pivot.data.table.length &amp;&amp; &lt;/tbody&gt;}
            &lt;/div&gt;
          );
        }
      });
    }
  
    render() {
      return (
        &lt;table&gt;
          {this.createTable()}
        &lt;/table&gt;
      );
    }
  }
  
  render(&lt;PivotTable /&gt;, document.getElementById("root"));
  </code></pre>
  
  <p>Sandbox:
  <a href="https://codesandbox.io/s/vgDE6rOEM" rel="nofollow noreferrer">https://codesandbox.io/s/vgDE6rOEM</a></p>
  
  <p>How can I fix this?</p>
  
  <p>The easiest way to do this I would assume is to create a seperate function that calls the data again, creates a new array and only creates the heading. The problem when I do that is that it will probably decrease performance a lot.</p>
  
  <p>Can I have this all in one call or what is the best way to tackle this problem?</p>