title: Add rows to a table in react jsx without duplicating row headings
body: <p>I want to pull data from firebase and then render it in my react component as a table. everything is working well so far and it renders the data correctly. However, I don't want to render the table headings every time. this is the code so far:</p>
  
  <pre><code>  &lt;div className="table"&gt;
      &lt;h1&gt; Table &lt;/h1&gt;
      {players.sort(function(a, b) {
            return (a.rank) - (b.rank);
        }).map(function(player, index) {
        index +=1;
        return &lt;table&gt;
                &lt;tr&gt;
                  &lt;th&gt;Rank&lt;/th&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Wins&lt;/th&gt;
                  &lt;th&gt;Losses&lt;/th&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;th&gt;{player.rank}&lt;/th&gt;
                  &lt;th&gt;{player.name}&lt;/th&gt;
                  &lt;th&gt;{player.wins}&lt;/th&gt;
                  &lt;th&gt;{player.losses}&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/table&gt;
      }, this)}
    &lt;/div&gt;
  </code></pre>
  
  <p>I understand why it's doing it because every time I map over my array it returns my table headings. I cant quite work out a way to render the table headings differently. I want to move it out of this part but then I'm not sure how to link it up with the table if that makes sense. 
  I basically just want <code>rank</code>, <code>name</code>, <code>wins</code>, <code>losses</code>, to be rendered once.</p>