CODEWITHSUNDEEP
htmlcssreactjsstyles
user1630575
user1630575

Reputation: 171

Dynamically format styles in CSS

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>';    
}

Upvotes: 2

Views: 91

Answers (2)

user1630575
user1630575

Reputation: 171

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>';    
}

Upvotes: 0

brandonwang
brandonwang

Reputation: 1653

You try this:

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

Upvotes: 2

Related Questions