[解決済み] Reactでarray.map()を描画する

質問

データの配列を使って <ul> 要素で構成されています。以下のコードでは console.log は正常に動作していますが、リスト項目が表示されません。

var Main = React.createClass({
  getInitialState: function(){
    return {
      data: dataRecent
    }
  },

  render: function(){
    return (
      <div>
        <ul>
          {
           this.state.data.map(function(item, i){
             console.log('test');
             <li>Test</li>
           })
         }
        </ul>
      </div>
    )
  }
});

ReactDOM.render(<Main />, document.getElementById('app')); 

何が間違っているのでしょうか？ベストプラクティスでないことがあれば、遠慮なくご指摘ください。

どのように解決するのですか？

ゴーシャ・アリニッチ の言うとおりです。 <li> 要素を使用します。 しかし、それにもかかわらず、この場合、ブラウザのコンソールに赤い警告が表示されるはずです。

配列またはイテレータの各子要素は、一意の "key" プロパティを持つ必要があります。

というわけで、"key" を追加する必要があります。

this.state.data.map(function(item, i){
  console.log('test');
  return <li key={i}>Test</li>
})

を削除するか console.log() で、es6を使った美しいワンライナーです。 矢印機能 :

this.state.data.map((item,i) => <li key={i}>Test</li>)

重要な更新 :

上記の回答で現状の問題は解決していますが、次のように セルゲイ コメントで言及されているように、マップインデックスに依存するキーを使用することは 悪い は、フィルタリングやソートを行いたい場合です。その場合は item.id もし id がすでに存在する場合は、一意な ID を生成してください。