Js refactoring with append

Question

Using ESLint it made me change a for..in and I decided to use Object.keys(). I would appreciate more help refactoring it in any way (functional programming or another commendation). This is inside of a function and I will reuse it in several places of my application

Object.keys(templates)
  .filter(key => templates[key].items < feed.length)
  .forEach(element => {
    const item = document.createElement('li');
    item.className = 'carousel-item';
    const imgDiv = document.createElement('div');
    imgDiv.className = `${templates[element].type}-item-view`;
    if (i === 0) imgDiv.className += ' selected';
    item.addEventListener('click', evt => {
      this.onItemClick(evt, templates[element].type);
    });
    item.appendChild(imgDiv);
    this.items.appendChild(item);
    i++;
    return 0;
});

Answer 1

Use forEach with index, instead of map with external i:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Like this:

items.forEach((item, index) => {
    // do something
}