JSXの反復小道具に反する

Question

私はReactで新しく、JSXに反復小道具データについて混乱しています。

はthis.props.dataは、私は、テーブル内のデータを反復処理するにはどうすればよい

[ 
    [ 
    "2017-1", 
    { 
     title: "title1" 
     describe: "des1" 
    } 
    ], 
    [ 
    "2017-2", 
    { 
     title: "title2" 
     describe: "des2" 
    } 
    ],... 
] 

であると仮定？

私はそれは私がそれをマップする

このような

<tbody> 
    <tr> 
    <td>2017-1</td> 
    <td>title1</td> 
    <td>des1</td> 
    </tr> 
    <tr> 
    <td>2017-2</td> 
    <td>title2</td> 
    <td>des2</td> 
    </tr> 
    ... 
</tbody> 

Answer 1

のいくつかの種類をレンダリングします期待していました。私はフォーマットが常に（怠惰から）同じであると仮定しています。

（スニペットを実行しないでください、それが唯一の書式設定のためである）

フィドル：https://jsfiddle.net/gL8drpyd/1/

var data = [ 
 
    [ 
 
    "2017-1", 
 
    { 
 
     title: "title1" 
 
     describe: "des1" 
 
    } 
 
    ], 
 
    [ 
 
    "2017-2", 
 
    { 
 
     title: "title2" 
 
     describe: "des2" 
 
    } 
 
    ] 
 
]; 
 

 
let rows = data.map((item) => 
 
    (
 
    <tr> 
 
     <td>{item[0]}</td> 
 
     <td>{item[1].title}</td> 
 
     <td>{item[1].describe}</td> 
 
    </tr> 
 
) 
 
); 
 

 
// put this in the <tbody> in render 
 

 
<tbody> 
 
    {rows} 
 
</tbody>