rendering-conditional-render
Use explicit ternary operators instead of && for conditional rendering. Apply when rendering values that could be 0, NaN, or other falsy values that might render unexpectedly.
Datos de origen
- Repositorio
- TheOrcDev/8bitcn-ui
- Última actividad en el origen
- 16 de enero de 2026 a las 09:09
- Idioma detectado de SKILL.md
- inglés
- Estrellas
- 2061
- Forks
- 119
Opciones de instalación
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Revisa los archivos de origen
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Mostrando SKILL.md
SKILL.md
Instrucciones de origen · Vista previa de solo lectura- name
- rendering-conditional-render
- description
- Use explicit ternary operators instead of && for conditional rendering. Apply when rendering values that could be 0, NaN, or other falsy values that might render unexpectedly.
## 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):**
```tsx
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):**
```tsx
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>
```
Ver en GitHub