title: How to map values to table in Javascript left to right
body: <p>I am trying to fill a table given variables a user provides. 
  For example, the user will input N=10 , then an Incremental value I = 2, a max value M = 20 and it should populate a table to read from the bottom left to right like so:</p>
  
  <p>16  18  20</p>
  
  <p>10  12  14</p>
  
  <p>How can I map the values to the cells in the table? I've been finding examples but they are mostly given sets of data in an array of objects. </p>
  
  <p><a href="https://codepen.io/anon/pen/VQQwdd" rel="nofollow noreferrer">https://codepen.io/anon/pen/VQQwdd</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const BottomLeftValue = 10;
  const IncrementalValue = 2;
  const MaxValue = 30;
  
  class TableRow extends React.Component {
    render() {
      const {
        data
      } = this.props;
      const row = data.map((data) =&gt;
      &lt;tr&gt;
        &lt;td key={data.name}&gt;{data.id}&lt;/td&gt;
        &lt;td key={data.price}&gt;{data.id+1}&lt;/td&gt;
        &lt;td key={data.id}&gt;{data.id+2}&lt;/td&gt;
      &lt;/tr&gt;
      );
      return (
        &lt;span&gt;{row}&lt;/span&gt;
      );
    }
  }
  
  class Table extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
      return (
        &lt;table&gt;
          &lt;TableRow data={this.props.data} /&gt;
        &lt;/table&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;Table data={BottomLeftValue} /&gt;, document.getElementById("root"));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I get that it's not working because there's no data, no name, price, id etc. Trying to work off the closest example I had.
  Any ideas?</p>