To me, the ternary helps show that these two pieces of UI are related. When true, you render X, and when false, you render Y.
<div><buttononClick={handleClick}>Toggle the text</button>{showConditionOneText?(<p>The condition must be true!</p>):(<p>The condition must be false!</p>)}</div>
By splitting these out into two separate conditionals using the && operator, it obfuscates the fact that the two pieces of UI are related and that they are opposites of each other.
<div><buttononClick={handleClick}>Toggle the text</button>{showConditionOneText&&<p>The condition must be true!</p>}{!showConditionOneText&&<p>The condition must be false!</p>}</div>
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Thanks! Good question.
To me, the ternary helps show that these two pieces of UI are related. When true, you render X, and when false, you render Y.
By splitting these out into two separate conditionals using the
&&
operator, it obfuscates the fact that the two pieces of UI are related and that they are opposites of each other.