Search code examples
javascriptnode.jstemplate-literals

Node - Show only 1 item while using HTML code in map function

I wanna send a email with node like this:

from: "abc@gmail.com",  
to: "test@gmail.com",  
subject: "test",  
html: <p>Message</p>

This works fine but when i wanna map some data in the html input it shows only the last item (quantity)

<div style="color: #f59e0b;">${cartItems.map((item) => {
 return item.name, item.quantity;
 })}
</div>

If I use html inside the template-literals I get an error: SyntaxError: Unexpected token '<'

${cartItems.map((item) => {
return(
 <div>
     <div style='color: #fff;'> item.name</div>
     <div style='color: #fff;'> item.name</div>
 </div>
)
})}
Solution

  • By using ${} you kind of disable the string temporarily, so HTML syntax doesn't make sense

    ${cartItems.map((item) => {
return(`
 <div>
     <div style='color: #fff;'> ${item.name}</div>
     <div style='color: #fff;'> ${item.name}</div>
 </div>
`)
})}