Discussion on: React Clean Code - Simple ways to write better and cleaner code

View post

Replies for: Great post! I agree to all your suggestions excluding the second one. I find the ternary operator less readable than conditional rendering. Charact...

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.

    <div>
      <button onClick={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>
      <button onClick={handleClick}>Toggle the text</button>
      {showConditionOneText && <p>The condition must be true!</p>}
      {!showConditionOneText && <p>The condition must be false!</p>}
    </div>