<div class="page-content infinite-scroll-content" data-infinite-distance="50" @infinite=${loadMore}>
${groupedByDays.map((items, index) => $h`
<div class="block-title">HEADER</div>
<div class="list media-list list-strong list-outline-ios list-dividers-ios inset-md">
<ul>
${items.map((item) => $h`
<li class="swipeout" @swipeout:deleted=${onDeleted}>
<div class="swipeout-content">
<a class="item-link item-content">
<div class="item-media"><i class="material-icons md-only">house</i></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">${item.name}</div>
<div class="item-after">${item.amount}</div>
</div>
<div class="item-subtitle">${item.note}</div>
<div class="item-text">${item.accDisplay} ${item.time}</div>
</div>
</a>
</div>
<div class="swipeout-actions-right">
...
</div>
</li>
`)}
</ul>
</div>
`)}
${hasMoreItems && $h`
<div class="preloader infinite-scroll-preloader"></div>
`}
</div>
The code uses nested mapping for rendering a nested array’s contents, in this case groupedByDays
array. It is just an array containing a number of sub-arrays. The nesting seems to work mostly, however, the <div class="block-title">HEADER</div>
is being rendered as <div class="block-title"><span class="preloader-inner"><svg viewBox="0 0 36 36"><circle cx="18" cy="18" r="16"></circle></svg></span>HEADER</div>
which results in a huge preloader being displayed.
Any suggestions on how to accomplish the rendering of nested arrays (being updated repeatedly)?
Goal is this:
Thank you!