56666


現在、特定の要素が集まった集合があり、それをループで回して２個の要素毎にdivで纏めたいです。  
完成形のHTMLの例を挙げると以下の様な感じです。

[code]

      <div class="row">
        <div class="hoge"/>
        <div class="hoge"/>
      </div>
      <div class="row">
        <div class="hoge"/>
        <div class="hoge"/>
      </div>
    
[/code]

上記の様なHTMLを出力する為に、以下の様なjsxを書きました。

[code]

      render () {
        return (
          <React.Fragment>
            {this.props.hoges.map((hoge, index) => (
              {index % 2 == 0 &&
                <div className="row">
              }
              <div class="hoge"/>
              {index % 2 == 1 &&
               </div>
              }
            ))}
          </React.Fragment>
        );
      }
    
[/code]

しかしこの記法では２種類の文法的なエラーが検出されている様です。  
一つ目は閉じないdivタグを宣言している点。  
二つ目はmap内で{}を使おうとしている点。

二つ目は別の関数に切り分けて引数にindexを取り、その内部でifを書くことによって分けることは出来ます。ただ文法エラーを回避する為に関数を一つ作るのは出来れば避けたいと考えています。

何か良い方法はないでしょうか？  
ご回答いただけると助かります。


CC BY-SA 4.0
2019-07-15T19:42:12.563
56665
2019-07-15T22:59:21.753
15186
question
reactjs react-jsx
JSXで配列をループで回して２個ごとにdivで纏めたい


`props.hoges` の要素を2つずつまとめてから `map` するという方針はどうでしょうか？配列の要素をまとめる関数として lodash の
chunk を使った例を記載します。

参考: <https://lodash.com/docs/#chunk>

[code]

    import _ from 'lodash';
    
    ...
    
    render () {
      const chunked = _.chunk(this.props.hoges, 2);
      return (
        <React.Fragment>
          {chunked.map((hs, i) => (
            <div key={i} className="row">
              {hs.map((_, j) => (
                <div key={j} className="hoge"/>
              ))}
            </div>
          ))}
        </React.Fragment>
      );
    }
    
[/code]


CC BY-SA 4.0
2019-07-15T22:59:21.753
56666
2019-07-15T22:59:21.753
32959
56665
answer