Remove comma from map

Question

Good afternoon.

I’m trying to create some elements dynamically coming from an API, only I’m running the map for this, the problem is that along with it, commas appear in the middle of the li’s that I can’t imagine where they’re from. How can I get around that?

I will simulate the API replay below:

function personalInstaThumb() {
	const personalInstaThumb = document.querySelector('#personalInstaThumb')
	const response = [
        {
			images: {
				url: 'https://www.blogsenacsp.com.br/wp-content/uploads/2018/10/GettyImages-932559358.jpg'
			}
		},
        {
			images: {
				url: 'https://www.blogsenacsp.com.br/wp-content/uploads/2018/10/GettyImages-932559358.jpg'
			}
		},
        {
			images: {
				url: 'https://www.blogsenacsp.com.br/wp-content/uploads/2018/10/GettyImages-932559358.jpg'
			}
		}
	]
	personalInstaThumb.innerHTML = `<ul>${response.map((img, indice) => `<li class="insta_thumb_item_${indice}"><img src=${img.images.url} width="150" height="150" /></li>`)}</ul>`
}
personalInstaThumb()

li {
  list-style: none;
}

<div id="personalInstaThumb"></div>

You can see that after each read, a comma appears. Why and how can I "fix" this?

Answer 1

Lucas, use .join('') to unite the result of your map, the parameter provided for the join is the separator.

personalInstaThumb.innerHTML = `<ul>${response.map((img, indice) => `<li class="insta_thumb_item_${indice}"><img src=${img.images.url} width="150" height="150" /></li>`).join('')}</ul>`