شرح صفوف ومحتوى الفقرة
تنبيه هندسي بالغ الأهمية: لا تضع رقماً خاماً على يسار المعامل && مباشرة! فإذا كانت قيمة unreadCount تساوي 0، فإن التعبير 0 && <Badge /> يعيد الرقم 0، وبما أن الصفر رقم قابل للعرض كأي رقم آخر، تطبعه React كحرف 0 مشوِّه على الشاشة.
احرص دائماً على تحويل الشرط الرقمي إلى مقارنة منطقية صريحة مثل unreadCount > 0 && <Badge />.
HTML
function InboxHeader({ count }) {
return (
<div className="rx-card">
<h3>Notifications</h3>
{count > 0 && (
<span className="rx-badge">{count} New</span>
)}
</div>
);
}