title: Dynamically Creating Table Rows With React
body: <p>I am trying to create a Table using React and React-Bootstrap that has a custom number of table rows. The table is supposed to store data about player statistics of a certain video game, and based on the video game the statistics may change, thus the number of rows and titles of these rows must be able to dynamically change as well. I wanted to create an array in the state that held the list of current statistics, then map this array to a  element using the map function and render the table. However, after trying several approaches I can't get any of the custom input to render. Below is the code : </p>
  
  <p><a href="https://i.stack.imgur.com/2Om7c.png" rel="nofollow noreferrer">Class Structure</a></p>
  
  <pre><code>class Statistics extends Component {
    constructor(props) {
      super(props)
      this.state = {
        game: '',
        player_names: [],
        positions: [],
        stat_categories: [
          'kills',
          'deaths',
          'assists'
        ]
      }
    }
  
    renderTableRows(array) {
      return (
        &lt;tr&gt;
          &lt;th&gt; NAME &lt;/th&gt;
          &lt;th&gt; TEAM &lt;/th&gt;
          &lt;th&gt; POSITION &lt;/th&gt;
          { array.map(item =&gt; {
              console.log(item)
              &lt;th key={item}&gt; {item} &lt;/th&gt;
            })
          }
        &lt;/tr&gt;
      )
    }
  
    render() {
      const columnLength = this.state.player_names.length
      const statCols = this.state.stat_categories
  
      return (
        &lt;div&gt;
          &lt;MyNav url={this.props.location.pathname} /&gt;
          &lt;Table responsive striped bordered hover&gt;
            &lt;thead&gt;
              { this.renderTableRows(statCols) }
            &lt;/thead&gt;
          &lt;/Table&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>The console also properly logs the data in state (kills, deaths, assists) -- so the issue is when rendering the  element. Any help would be appreciated!</p>