Utilisation de conditions dans une boucle de carte de tableau (Next.js)

Question

Résultat final de l'interface utilisateur

J'ai donc ces données

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

Je veux vérifier si l'index du tableau est un multiple de 5, donc chaque fois que la boucle est à l'index 0, 5, 10, etc. elle imprimera ce html <div class="slide-item"><div>{data}</div></div> mais quand elle n'est pas à l'index 0, 5, 10, etc. (ce qui signifie qu'il est en position 1, 2, 3, 4, 6, 7, 8 etc.) et il s'imprimera

<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>

Donc, fondamentalement, l’interface utilisateur du résultat final ressemble à l’image ci-jointe.

Ma première tentative est comme ça

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

Je ne sais pas trop comment faire, si quelqu'un peut m'aider, ce serait grandement apprécié !

Answer 1

Je pense que vous devez vérifier la condition en fonction de res car l'index commence toujours à partir de 0

Essayez ceci

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