プログラミングのゴミ箱

日々の学習の中で知らなかったことについて、調べたことを解説します。

Reactでforループを使いたい

最初に参考記事
React.jsでループするには。 - Qiita

Reactノードの中でfor文を使うことは出来ない。ではどうすればいいのか。

事前にfor文でノードを作っておき、それを実際に返すノードに変数として入れるというのが一般的な書き方らしい。

render: function(){
  var list = [];

  var data = [
    { text: "1" },
    { text: "2" }
  ];

  for(var i in data){
    list.push(<li>{data[i].text}</li>);
  }

  return(
    <ul>
      {list}
    </ul>
  );
}

こんな漢字でlistにノードを入れてから表示する