title: ReactJS: How to render rows dynamically
body: <p>
  I am facing an issue to order the rows of a fetched API data dynamically, i.e if the rows data within the API is changed (+/- row) to render it automatically. I am trying to print the data fetched from an API into a table. Anyhow the columns are well printed dynamically, but the function that I am using for columns this.state.columns.map(( column, index ) => doesn't function in the same way for the rows. I think i am misleading the ES6 standard, but I am not sure. <a href="https://i.stack.imgur.com/bv0br.jpg" rel="nofollow noreferrer">Here is how it's look like, if the rows are not hardcoded.</a></p>
  
  <p>Here is my code sample:</p>
  
  <pre><code>class App extends React.Component
  {
      constructor()
      {
          super();
          this.state = {
              rows: [],
              columns: []
          }
      }
  
      componentDidMount()
      {
  
          fetch( "http://ickata.net/sag/api/staff/bonuses/" )
              .then( function ( response )
              {
                  return response.json();
              } )
              .then( data =&gt;
              {
                  this.setState( { rows: data.rows, columns: data.columns } );
              } );
  
      }
  
      render()
      {
  
          return (
              &lt;div id="container" className="container"&gt;
                  &lt;h1&gt;Final Table with React JS&lt;/h1&gt;
                  &lt;table className="table"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt; {
                              this.state.columns.map(( column, index ) =&gt;
                              {
                                  return ( &lt;th&gt;{column}&lt;/th&gt; )
                              }
                              )
                          }
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt; {
                          this.state.rows.map(( row ) =&gt; (
                              &lt;tr&gt;
                                  &lt;td&gt;{row[0]}&lt;/td&gt;
                                  &lt;td&gt;{row[1]}&lt;/td&gt;
                                  &lt;td&gt;{row[2]}&lt;/td&gt;
                                  &lt;td&gt;{row[3]}&lt;/td&gt;
                                  &lt;td&gt;{row[4]}&lt;/td&gt;
                                  &lt;td&gt;{row[5]}&lt;/td&gt;
                                  &lt;td&gt;{row[6]}&lt;/td&gt;
                                  &lt;td&gt;{row[7]}&lt;/td&gt;
                                  &lt;td&gt;{row[8]}&lt;/td&gt;
                                  &lt;td&gt;{row[9]}&lt;/td&gt;
                                  &lt;td&gt;{row[10]}&lt;/td&gt;
                                  &lt;td&gt;{row[11]}&lt;/td&gt;
                                  &lt;td&gt;{row[12]}&lt;/td&gt;
                                  &lt;td&gt;{row[13]}&lt;/td&gt;
                                  &lt;td&gt;{row[14]}&lt;/td&gt;
                                  &lt;td&gt;{row[15]}&lt;/td&gt;
                              &lt;/tr&gt;
                          ) )
                      }
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          )
      }
  }
  
  
  ReactDOM.render( &lt;div id="container"&gt;&lt;App /&gt;&lt;/div&gt;, document.querySelector( 'body' ) );
  </code></pre>
  
  <p>Instead, I was able to print the rows harcoded, if I give value to the 'td' elements, but I want to print it dynamically, in case the data within the API has been changed.</p>
  
  <p>You are welcome to contribute directly to my Repo: <a href="https://github.com/andimit/fetching-react-api" rel="nofollow noreferrer">Fetching API data into a table</a></p>
  
  <p><a href="https://i.stack.imgur.com/IvTi6.jpg" rel="nofollow noreferrer">Here is how looks like my example, when the rows values has been hardcoded within 'td' elements.</a></p>
  
  <p>Any suggestions will be appreciated!</p>