Distinguishing Nullish Coalescing from Logical OR in Conditional JSX Rendering

import React from 'react';
 
export function UserMetricBadge({ count, label, unreadCount }) {
  // Logical OR (||) treats 0 as falsy, triggering the fallback incorrectly
  const faultyCountDisplay = count || 'No data';
 
  // Nullish coalescing (??) only triggers on null or undefined, preserving 0
  const safeCountDisplay = count ?? 'N/A';
 
  // Optional chaining (?.) paired with ?? handles deeply nested fallbacks safely
  const badgeText = unreadCount?.badge ?? 0;
 
  return (
    <div className="metric-badge">
      <span className="label">{label}:</span>
      <span className="value">{safeCountDisplay}</span>
      <span className="unread">Unread: {badgeText}</span>
    </div>
  );
}