forを用いて指定回数.map処理を行いたい。

Question

いつもお世話になります。
GatsbyJSを使ってサイトを作成しています。
記事リストを作成していて配列を.sliceで分割して一定の処理を割り込ませたいと考えています。
その前段階としてfor文を用いて同じ処理を行いその中で配列処理を行いたいと考えているのですが上手く動きません。
アドバイスの程よろしくお願い申し上げます。
error内容

 40:8  error  Parsing error: Unexpected token

動作確認済みのコード

      <div className="grid">
      {postList.map( post => (
        <div key={post.id} className="griditem">
        <div className="coverImage">
        <CoverImage filename={post.cover}></CoverImage>
        </div>
        <span>
            {post.title}<br/>
             {post.date}
            </span>
        </div>
      ))}
      </div>

forを入れて動かないコード

    <div className="grid">
      {for (  var i = 0;  i < 3;  i++  ){
      postList.map( post => (
        <div key={post.id} className="griditem">
        <div className="coverImage">
        <CoverImage filename={post.cover}></CoverImage>
        </div>
        <span>
            {post.title}<br/>
             {post.date}
            </span>
        </div>
      ))}
    }
      </div>

Answer 1

JSXの{}の中に書けるものは式だけなので、文であるforを直接書くことはできません。

いちおう、無名関数に包んで即時実装させることで、その場に書くこともできなくはないのですが、目的の配列を生成する関数を別途で作って、JSX内ではそれを呼び出すだけにする、というほうがわかりやすいのではないかと考えます。

Answer 2

React.jsでループするには。 - Qiita

returnの行内で全部やるなが正解のようですね。
複雑なDOMを返す際はこのように変数で一度受けるようにした方が分かりやすいでしょう。

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>
  );
}

Comments

[1042limit]

無事return内で書くことで実装できました。
ありがとうございました。

Answer 3

// 閉じ括弧が正しくある
{postList.map( post => (

))}

// 閉じ括弧が正しくない
{for (  var i = 0;  i < 3;  i++  ){

))}

// 正しくは以下なのでは？
{for (var i = 0; i < 3; i++) {

}}

追記

JSXにfor文やif文は使えないみたいです。括弧の問題じゃありませんでした。
React, JSX で条件分岐(If)やループ(For)を使う方法