行の見出しを複製せずにreact jsxのテーブルに行を追加する

Question

firebaseからデータを取り出し、それを反応コンポーネントでテーブルとしてレンダリングします。これまでのところすべてがうまくいき、データが正しくレンダリングされます。しかし、毎回テーブル見出しを表示したくありません。

<div className="table"> 
    <h1> Table </h1> 
    {players.sort(function(a, b) { 
      return (a.rank) - (b.rank); 
     }).map(function(player, index) { 
     index +=1; 
     return <table> 
       <tr> 
       <th>Rank</th> 
       <th>Name</th> 
       <th>Wins</th> 
       <th>Losses</th> 
       </tr> 
       <tr> 
       <th>{player.rank}</th> 
       <th>{player.name}</th> 
       <th>{player.wins}</th> 
       <th>{player.losses}</th> 
       </tr> 
      </table> 
    }, this)} 
    </div> 

私は私の配列上にマッピングするたびに、それは私のテーブルの見出しを返すので、それはそれをやっている理由を私は理解して：これは、これまでのコードです。私はテーブルの見出しを別々にレンダリングする方法を考えていません。私はこの部分からそれを移動したいが、それが理にかなっていればテーブルとリンクする方法がわからない。 基本的には、rank,name,wins,lossesを一度レンダリングするだけです。

Answer 1

マップからパーツを取り出して、データを反復したくない場合があります。

<div className="table"> 
    <h1> Table </h1> 
    <table> 
     <tr> 
     <th>Rank</th> 
     <th>Name</th> 
     <th>Wins</th> 
     <th>Losses</th> 
     </tr> 
    {players.sort(function(a, b) { 
      return (a.rank) - (b.rank); 
     }).map(function(player, index) { 
     index +=1; 
     return <tr> 
       <th>{player.rank}</th> 
       <th>{player.name}</th> 
       <th>{player.wins}</th> 
       <th>{player.losses}</th> 
      </tr> 
    }, this)} 
    </table> 
    </div>