i have code like below,
{hideValue && !isOpen && (
<span>
{percentage}
</span>
)}
{!hideValue && !isOpen && (
<span>
{value}
</span>
)}
how to rewrite above code using ternary operator?
I am new to ternary operator usage. could someone help me with this. thanks.
I think what you have it's ok (maybe there's some duplicated code), but you can indeed use a ternary operator.
A ternary operator is basically a shorthand way of writing an if-else statement. In this case, if hideValue is true we want to show percentage otherwise we show value.
Something like this:
{!isOpen &&
(hideValue ? <span>{percentage}</span> : <span>{value}</span>
)}
Note that since !isOpen always needs to be false you can very it before.
You can additionally implement it like this:
{!isOpen && <span> {hideValue ? percentage : value} </span>}
since they both use the <span> tag.