Iterate a list and adding/grouping components according to its index
Tue Jul 05 2022 07:59:46 GMT+0000 (Coordinated Universal Time)
Saved by
@jen_magpantay
#javascript
#react.js
// Consider a array that you need to map to display it
// You want to group the array content into pairs
// Each pair will have: open div tag + pair of items + close div tag
// To reach that, use index during the mapping, like below
// Ps.: The list I have to reproduce this has 15 items
var openDiv = "<div>";
var closeDiv = "</div>";
var animation = "--- collapsible content ---";
list.map((item, index) => {
// call all odd indexes and last item of the list, opening the div before each one
if (index % 2 === 0 || index === mealList.length - 1) {
console.log(openDiv);
console.log(index, item.foodItem);
}
// call all even numbers, closing the div after each one
if (index % 2) {
console.log(index, item.foodItem);
console.log(closeDiv);
console.log(animation);
console.log(" ");
}
// call the last item of the list to close the div
if (index === mealList.length - 1) {
console.log(closeDiv);
console.log(animation);
}
});
/*
Output:
<div>
0 Oven Mitt - 13 Inch
1 Lamb - Bones
</div>
--- collapsible content ---
<div>
2 Mcguinness - Blue Curacao
3 Pumpkin - Seed
</div>
--- collapsible content ---
<div>
4 Onions - Red Pearl
5 Wine - Rioja Campo Viejo
</div>
--- collapsible content ---
<div>
6 Pepper - Green, Chili
7 Coffee Caramel Biscotti
</div>
--- collapsible content ---
<div>
8 Water - Perrier
9 Bread - Multigrain
</div>
--- collapsible content ---
<div>
10 Veal - Tenderloin, Untrimmed
11 Butcher Twine 4r
</div>
--- collapsible content ---
<div>
12 Extract Vanilla Pure
13 Strawberries - California
</div>
--- collapsible content ---
<div>
14 Nut - Walnut, Chopped
</div>
--- collapsible content ---
*/
content_copyCOPY
Comments