mcpField
R
rendering-conditional-render

rendering-conditional-render

github.com/theorcdevDevelopment2.1k36 installsUpdated 2d ago
Repository

About rendering-conditional-render

A React rendering skill that recommends explicit ternaries instead of `&&` when conditions may be values such as `0` or `NaN`. This avoids rendering unintended falsy values.

Key features

  1. 01Use ternaries for conditional rendering
  2. 02Handle 0 and NaN conditions explicitly

Use cases

  1. 01Hide a badge when its count is zero
  2. 02Prevent unintended falsy values from appearing in the UI

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill rendering-conditional-render

After installing, type/rendering-conditional-renderin Claude Code to confirm it loaded.

Details

From the project README

Use Explicit Conditional Rendering

Use explicit ternary operators (? :) instead of && for conditional rendering when the condition can be 0, NaN, or other falsy values that render.

Incorrect (renders "0" when count is 0):

function Badge({ count }: { count: number }) {
  return (
    <div>
      {count && <span className="badge">{count}</span>}
    </div>
  )
}

// When count = 0, renders: <div>0</div>
// When count = 5, renders: <div><span class="badge">5</span></div>

Correct (renders nothing when count is 0):

function Badge({ count }: { count: number }) {
  return (
    <div>
      {count > 0 ? <span className="badge">{count}</span> : null}
    </div>
  )
}

// When count = 0, renders: <div></div>
// When count = 5, renders: <div><span class="badge">5</span></div>

Comments

Markdown supported