title: React not rendering components from an array
body: <p>I've been working on trying to get a table drawn from an array in react and I can't seem to get it to work. Normally I get the data from a database, but to test it I'm just making the array myself so I know the data is good. I've tried surrounding my map code with a div and React.Fragment like in examples I've seen but still none of the array is rendered. All the other components render fine. I've been working on trying to fix this for hours, so any help would be appreciated.</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>import React, { Component } from 'react';
  import './RankingsPage.css';
  import AddGamePage from './AddGamePage'
  
  class RankingsPage extends Component {
  
    constructor(props){
      super(props);
      this.getHeadToHeadPage = this.getHeadToHeadPage.bind(this);
      this.updateTable = this.updateTable.bind(this);
  
      let tableData = [];
      this.state = {
        tableRows: tableData
      }
  
      let body = {
        method: 'GET',
        headers: {
          'Accept': 'application/json'
        }
      }
      /*fetch('./GetRankings.php', body).then((response) =&gt; response.json()).then((json) =&gt; {
        if(json['Status'] === 'ConnectionError') {
          alert('Database Connection error! Please try again!');
        } else {
          for(let key in json['Rankings']){
            tableData.push({
              'Name': key,
              'Wins': json['Rankings'][key]['Wins'],
              'Losses': json['Rankings'][key]['Losses'],
              'Rank': json['Rankings'][key]['Rank']
            });
          }
          console.log(tableData);
          this.updateTable(tableData)
        }
      }).catch((error) =&gt; {
        alert('File Connection Error! Please try again!');
        console.log(error);
      });*/
      tableData.push({'Name': 'Bob', 'Rank': 10, 'Wins': 3, 'Losses': 2});
      this.updateTable(tableData);
    }
  
    updateTable(tableData) {
      console.log(tableData);
  
      this.setState((prevState, props) =&gt; {
        return {tableRows: tableData}
      });
      console.log("Updating: "+JSON.stringify(this.state.tableRows[0]['Name']));
    }
  
    getHeadToHeadPage(e) {
      this.props.changePage(&lt;AddGamePage /&gt;);
    }
  
    render(){
      console.log('From render: '+this.state.tableRows);
      return(
        &lt;center className = 'center'&gt;
          &lt;table&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Score&lt;/th&gt;
                &lt;th&gt;Wins&lt;/th&gt;
                &lt;th&gt;Losses&lt;/th&gt;
              &lt;/tr&gt;
              {this.state.tableRows.map((value, index) =&gt; {
                &lt;tr key={index}&gt;
                  &lt;td&gt;&lt;a href='#' onClick = {this.getHeadToHeadPage}&gt;{value['Name']}&lt;/a&gt;&lt;/td&gt;
                  &lt;td&gt;{value['Rank']}&lt;/td&gt;
                  &lt;td&gt;{value['Wins']}&lt;/td&gt;
                  &lt;td&gt;{value['Losses']}&lt;/td&gt;
                &lt;/tr&gt;
              })}
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/center&gt;
      );
    }
  }
  
  export default RankingsPage;</code></pre>
  </div>
  </div>
  </p>