After extensive searching, I have only come across solutions that involve using .join() to combine the items into a single string.
const createCard = () => {
const pokemonTypes = ['grass', 'fire', 'water'];
return (
`<div>
${pokemonTypes.map(type => `<div>${type}</div>`)}
</div>`
)
}
document.body.insertAdjacentHTML("beforeend", createCard());
To provide some background, I am working with an API, but I have simplified the code for readability and convenience.
My goal is to display each string in its own div, allowing me to style each div differently - for example, using green for grass, blue for water, and red for fire, creating color-coded buttons.
Upon running the code, the strings successfully display in their own divs, but the comma between them persists. I would prefer for them to be displayed side by side without any separation.