使用條件在數組映射循環中（Next.js）

Question

最終結果UI

所以我有這些數據

var arr = [1,2,3,4,5,6,7,8]

我想要檢查數組索引是否是5的倍數，所以每次循環在索引0、5、10等位置時，它將列印這個html <div class="slide-item"> <div>{data}</div></div> 但當它不在索引0、5、10等位置時（表示它在1、2、3、4、6、7、 8等位置），它將列印

<div class="slide-item"><div>{data 1}</div><div>{data 2}</div></div><div class="slide-item"><div>{data 3}</div><div>{data 4}</div></div>

所以基本上最終結果的UI就像附圖一樣。

我的第一個嘗試是這樣的

{arr.map((res, index) => {return ({index % 5 === 0 ? (<div className="slide-item"><div>{res}</div></div>): (<div class="slide-item"><div>{data 1}</div><div>{data 2}</div></div>)}

我不太確定如何做，如果有人能幫忙，將不勝感激！

Answer 1

我認為你需要根據res來檢查條件，因為索引總是從0開始

試試這個

{
    arr.map((res, index) => {
        return ( res % 5 === 0 
            ? <div className="slide-item"><div>{res}</div></div>
            : <div>
                 <div class="slide-item"><div>{data 1}</div>
                 <div>{data 2}</div></div>
              </div>
         )       
     })
}