title: Create a table from JSON completely dynamically
body: <p>I want to create entire table from a JSON array include dynamic <code>th</code>s, so a decoupled the head part to:</p>
  
  <pre><code>import React from 'react';
  import TableDataTR from './TableTRView';
  const TableView = ({ thds, tableData }) =&gt; {
      if (!thds) {
          return &lt;table&gt;&lt;/table&gt;;
      }
      return (
          &lt;div&gt;
              &lt;table&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          {thds.map((data, i) =&gt; &lt;th key={i}&gt;{data.th}&lt;/th&gt;)}
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;TableDataTR tableData={tableData}/&gt;
              &lt;/table&gt;
  
          &lt;/div&gt;
      )
  }
  export default TableView;
  </code></pre>
  
  <p>And the table prints the head part, but I am having trouble printing my <code>tbody</code>:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class TableDataTR extends Component {
      render() {
  
         let rows = this.props.tableData.map((currElement, index) =&gt;{
             return(
              &lt;tr key={index}&gt;
                  &lt;td&gt;currElement[index]&lt;/td&gt;
              &lt;/tr&gt;
             ) 
         });
  
  
          return (
              &lt;tbody&gt;{rows}&lt;/tbody&gt;
          );
        }
  }
  export default TableDataTR;
  </code></pre>
  
  <p>Example data, table head</p>
  
  <pre><code>thds : [ { th: 'th1' },
          { th: 'th2' }]
  
  tableData:[ { tdData1: 'somedata', tdData2: 'somedata2' },
              { tdData1: 'somedata', tdData2: 'somedata2' },]
  </code></pre>
  
  <p>The table head works fine, but the data inside <code>tbody</code> is not displaying at all.</p>
  
  <p>The final goal is to get any 2 arrays and display the table accordingly.</p>