rendering-conditional-render

What problem does it solve?

This Skill helps avoid rendering issues in UI frameworks like React by replacing logical AND (&&) conditional rendering with explicit ternary operators. It prevents numbers such as 0 or NaN from rendering unintentionally.

Core Features & Use Cases

• Explicit conditional rendering: Use the ternary operator to control rendering output precisely.
• Safe UI when values are falsy but meaningful: Correctly renders nothing for 0, NaN, or other falsy values when appropriate.
• Use Case: Show a badge only when count is greater than zero, avoiding the display of 0.

Quick Start

Apply the pattern by replacing expressions like count && <span className="badge">{count}</span> with a ternary:

• Original: {count && <span className="badge">{count}</span>}
• Fixed: {count > 0 ? <span className="badge">{count}</span> : null}