Boa tarde.
Estou tentando criar alguns elementos dinâmicamente vindos de uma API, só que estou rodando o map pra isso, o problema é que junto dele, aparecem virgulas no meio das li's que não imagino de onde são. Como posso contornar isso?
Vou simular o response da API abaixo:
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>
Podem ver que depois de cada li, aparece uma vírgula. Por que e como posso "consertar" isso?