Mapping Array To Elements + Conditional Rendering

Questions
1

Is it possible to map an array to elements and use conditional rendering inside?

Something like this:

${(products.map((product) => $h`
 ${product.title.length > 0 && $h`
     <h1 innerHTML="${product.title}"></h1>
 `}
`))}

It works but it also prints the words true or false

2

Maybe try filtering first. After mapping it should then come the string:

${products.filter((product) => product.title.length > 0).map((product) => $h`
  <h1 innerHTML="${product.title}"></h1>
`)}
1 Like
3

My example wasn’t good :slight_smile: I actually want to keep the products without the title

4

I would like to revisit this topic.
I have the problem in another place.
Is it possible to use an if-condition inside an array map?

5

Yes, it is possible:

[1,2,3].map((el) => {
  if (something) return 'foo';
  else return 'bar';
})