Give style following If condition in EJS

Question

<% docs.forEach( function ( doc ){ %>

<div class="item">
    <% if (doc.Active) { %>
    <style> .item { background-color:red }</style>
    <% } %>
</div>

<% }); %>

Imagine 3 docs,

doc1 (Active == true)
doc2 (Active == true)
doc3 (Active == false)

I want to give style to Active == true only. I coded like above, but the result is every div was given style. so finally all has red background, this is not what I expected.

How can I give style conditionally in EJS?

Answer 1

You would want to conditionally set a class like .active and have that with your CSS styles (such as the red background-color). Like this:

<% docs.forEach(function (doc) { %>    
  <div class="item <%= doc.Active ? 'active' : '' %>"></div>
<% }); %>