React'te koşullu render ve liste render'ı nasıl yapılır?

JSX içinde JavaScript ifadeleri kullanılır:

function Bildirimler({ liste, yukleniyor }) {
  if (yukleniyor) return <Spinner />;              // erken dönüş

  return (
    <section>
      {liste.length === 0 ? (
        <p>Bildirim yok</p>                         // üçlü operatör
      ) : (
        <ul>
          {liste.map(b => <li key={b.id}>{b.mesaj}</li>)}
        </ul>
      )}
      {liste.some(b => !b.okundu) && <Rozet />}     // && ile
    </section>
  );
}

Tuzak: {sayi && <Rozet />} ifadesinde sayi 0 ise ekrana 0 yazılır. Bunun yerine {sayi > 0 && ...} yazılmalıdır.