How to use array.map() in this setting?

Question

Im relatively new to js and trying to figure out how to use map() in this function. Im pretty stuck.. Any ideas?

Im confused because in this case map() is used to iterate over inititalList, and i really dont need the return value, I think..?

const addListItems = () => {     
  for (var i = 0; i < initialList.length; i++) {      
    if (i === 0) {          
      listWrapper.innerHTML += `<li class=active data-key=${initialList[i]}>${initialList[i]}</li>`;
    } else {
      // convert to template literals/strings
      listWrapper.innerHTML += `<li data-key=${initialList[i]}> ${initialList[i]} </li>`;
    }
};

Ive tried this, but somethings not right:

const addListItems = () => {
      let map = initialList.map(item{i === 0 ? listWrapper.innerHTML += <li class=active data-key=${initialList[i]}>${initialList[i]}</li>; :
 listWrapper.innerHTML += <li data-key=${initialList[i]}> ${initialList[i]} </li>; })

};

Answer 1

Try this. Also it is a good idea to encapsulate your functions to get a more readable code. Here, instead of writing a long html snippet, I simply speak english inside my loop.

 const formatFirstListItem = (item) => item.innerHTML += `<li class=active data-key=${item}>${item}</li>`; const formatListItem = (item) => item.innerHTML += `<li data-key=${item}> ${item} </li>`; function addListItems (list){ return list.map((item, index)=> { if(index === 0) return formatFirstListItem(item) return formatListItem(item) }) }

Answer 2

Array.map() is used for iterating over an iterable collection and creating a new value based on the original one and then returning it . In your case, you don't have any purpose of using map , you should be using a simple for loop or if you're really into using a function just use .forEach :

initialList.forEach((item, index) => index === 0 ? listWrapper.innerHTML += `<li class=active data-key=${item}>${item}</li>` : listWrapper.innerHTML += `<li data-key=${item}> ${item} </li>`);

Your solution isn't working, because you're not providing a function to the .map , but a ternary conditional statement.

Answer 3

I don't think you need to use map() in your case because map() receives a callback that returns something each and every loop, so the map() methods returns a new array with the same length as the iterated array. That's what map() is meant to do.

In your case you want to return a single HTML string , I would suggest you to just use forEach :

initialList.forEach((item, index) => {
  const element = index === 0 ? `<li class=active data-key=${item}>${item}</li>` : `<li data-key=${item}>${item}</li>`
  listWrapper.innerHTML += element
})

Or if you are interested in ES6, you could try reduce() instead:

listWrapper.innerHTML = initialList.reduce((acc, cur, index) => {
  return index === 0 ? acc + `<li class=active data-key=${cur}>${cur}</li>` : acc + `<li data-key=${cur}>${cur}</li>`
}, '')