title: How to create a Table from lists using ReactJS?
body: <p>My objective is to create the following html table from a list of rows ([1, 2, 3]) and a list of columns ([1, 2]) using ReactJS: </p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
   &lt;td&gt;1&lt;/td&gt;
   &lt;td&gt;2&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;1&lt;/td&gt;
   &lt;td&gt;2&lt;/td&gt;
   &lt;/tr&gt;
    &lt;tr&gt;
     &lt;td&gt;1&lt;/td&gt;
     &lt;td&gt;2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>See below for my React script and here for <a href="https://codepen.io/chriscruz/pen/pqwzYw?editors=1011" rel="nofollow noreferrer">my codepen</a>, which doesnt seem to be working</p>
  
  <pre><code> class Tbody extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            columns: [1, 2],
            rows: [1, 2, 3]
          };
        }
  
        renderCols() {
          return (
            {this.state.columns.map(col =&gt; &lt;td key={col}&gt; {col} &lt;/td&gt;)}
          );
        }
  
        renderRows(){
         return (
           {this.state.rows.map(row =&gt; &lt;tr key={row}&gt; {this.renderCols()} &lt;/tr&gt;)}
          );
        }
  
        render() {
          return &lt;tbody&gt;{this.renderRows()}&lt;/tbody&gt;;
        }
      }
  
      class Table extends React.Component {
        render() {
          return (
            &lt;div&gt;
              &lt;table&gt;
              &lt;Tbody /&gt;
               &lt;/table&gt;
            &lt;/div&gt;
          );
        }
      }
  
      ReactDOM.render(&lt;Table /&gt;, document.getElementById("root"));
  </code></pre>