Tengo una página HTML simple y estoy mapeando una matriz para llenar un div con tarjetas. La alineación de la tarjeta estaba mal, así que cuando la inspeccioné, vi que hay comas después de cada tarjeta, excepto la última, que está arruinando la alineación. No he agregado estas comas en el código. Mi código:
itemsdiv.innerHTML = items.map(el => { return (` <div class="item"> <span class="item-title">${el.name}</span> <img class="item-image" src=${el.src}> <div class="item-details"> <span class="item-color">${el.color}</span> </div> </div> ` ) }) itemsdiv es un div vacío para llenar, y items es una matriz que se ve así:
items = [ { name: 'T-Shirt', src: 'Images/Shirt.png', color: 'blue', }, { name: 'Coffee Cup', src: 'Images/Coffee.jpg', color: 'red', } ]Cuando inspecciono se ve algo como esto:
<div class="itemsdiv"> <div class="item"></div> "," <div class="item"></div> "," <div class="item"></div> </div>Después de .map , intente etiquetar en .join(" ")
Solución basada en el comentario de @VLAZ:
Cuando convierte una matriz en una cadena, automáticamente une los elementos con comas entre ellos. Asignar una matriz a innerHTML la convierte en una cadena.