Dynamically format styles in CSS

Question

I am trying to display an icon in a column instead of its text via CSS. However, I have been unable to find right syntax for this piece of code.

My reactjs code has:

return '<div><span class="fa fa-2x fa-star" style="display : [' + item.Status + ' == approved] ? block: none"></span></div>';    
}

That results in below code which doesn't work:

<div>
<span class="fa fa-2x fa-star" style="display : [submitted == approved] ? block: none"></span>
</div>

In the above situation when "submitted" != "approved", it ideally shouldn't show the icon but the star icon show up in each row (whether value matches or not).

In chrome, I've also tried below codes and many similar formats but none of them work:

<span class="fa fa-2x fa-star" style="[rejected == approved] ? display: block : display : none"></span>

<span class="fa fa-2x fa-star" style="display : [rejected == approved] ? block : none"></span>

<span class="fa fa-2x fa-star" style="display : "rejected" == "approved" ? block : none"></span>

My requirement is that icon should be visible only when value LHS and RHS value matches, eg: "approved" = "approved".

The solution that worked for me is:

var cssClass = item.Status = "approved" ? "fa fa-2x fa-star" : "myblankcssclass" ; //add various classes using ternary operator.

return '<div><span class=" '+ cssClass + '" </span></div>';    
}

Answer 1

You try this:

displayStyle = submitted == approved ? 'block': 'none';
return (
    <div>
        <span class="fa fa-2x fa-star" style={{ display: displayStyle }}></span>
    </div>
)

Answer 2

Code that worked for me:

var cssClass = item.Status = "approved" ? "fa fa-2x fa-star" : "myblankcssclass" ; //add various classes using ternary operator.

return '<div><span class=" '+ cssClass + '" </span></div>';    
}