Conditional Rendering — if/else, &&, ternary, null qaytarish

~15 daq · React · Component Patterns

Shartga qarab ko'rsatish

Haqiqiy ilovada UI doim bir xil ko'rinmaydi. Foydalanuvchi login qilganmi? Ma'lumot yuklanayaptimi? Xato yuz berdimi? — bularni shartga qarab ko'rsatish kerak.

React da buning bir nechta usuli bor. Har birining o'z joyi bor — qaysi holatda qaysi usul o'qilishi osonroq ekanini bilish muhim.

1. if/else — murakkab shartlar uchun

JSX ichida if ishlamaydi, lekin JSX dan oldin istalgan JavaScript yozish mumkin. Shart murakkab bo'lsa — return dan oldin hal qiling.

function Sahifa({ holat, maʼlumot }) {
  // Har bir holat uchun alohida return
  if (holat === 'yuklanmoqda') {
    return <p>Yuklanmoqda...</p>;
  }

  if (holat === 'xato') {
    return <p style={{ color: 'red' }}>Xato yuz berdi</p>;
  }

  if (!maʼlumot) {
    return <p>Maʼlumot topilmadi</p>;
  }

  return <h1>{maʼlumot.sarlavha}</h1>;
}

Bu usul — early return deyiladi. Har bir "muammo" holatini avval hal qilib, asosiy UI ni oxirida qaytarish. Kod o'qilishi oson — har bir shart aniq ko'rinadi.

2. Ternary — ikki holat uchun

Ikki holat bo'lsa — ternary operator qulay. JSX ichida ham ishlaydi.

function LoginTugma({ loginQilgan }) {
  return (
    <div>
      {loginQilgan
        ? <button>Chiqish</button>
        : <button>Kirish</button>
      }
    </div>
  );
}

Ternary ichida ternary yozish — o'qilmay qoladi:

// ❌ Yomon — o'qish qiyin
{a ? b : c ? d : e}

// ✅ Yaxshi — if/else yoki o'zgaruvchi ishlatish
let kontent;
if (a) kontent = b;
else if (c) kontent = d;
else kontent = e;

3. && — faqat bitta holat uchun

Biror narsa faqat shart to'g'ri bo'lganda ko'rsatilishi kerak bo'lsa:

function Xabar({ xatoBormi, matn }) {
  return (
    <div>
      <h1>Sahifa</h1>
      {xatoBormi && <p className="xato">{matn}</p>}
    </div>
  );
}

xatoBormi false bo'lsa — <p> umuman ko'rsatilmaydi.

⚠️ Keng tarqalgan tuzoq: && bilan son ishlatmang.

// ❌ users.length = 0 bo'lsa — ekranda "0" chiqadi!
{users.length && <UserList />}

// ✅ Boolean ga aylantiring
{users.length > 0 && <UserList />}

Nima uchun? 0 && <UserList /> — JavaScript 0 qaytaradi. React false ni ko'rsatmaydi, lekin 0 ni ko'rsatadi.

4. null qaytarish — komponentni yashirish

Komponent hech narsa ko'rsatmasligi kerak bo'lsa — null qaytarish mumkin.

function Bildirishnoma({ xabarlar }) {
  // Xabar yo'q bo'lsa — hech narsa ko'rsatma
  if (xabarlar.length === 0) return null;

  return (
    <div className="bildirishnoma">
      {xabarlar.length} ta yangi xabar
    </div>
  );
}

null qaytargan komponent DOM da hech narsa qoldirmaydi. undefined va false ham xuddi shunday — ko'rsatilmaydi.

Qaysi usulni qachon ishlatish?

Ko'p holat (yuklanmoqda, xato, bo'sh, ma'lumot bor)?
  → if/else, early return

Ikki holat (login/logout, ochiq/yopiq)?
  → ternary

Bitta holat (faqat ko'rsatish yoki yo'q)?
  → &&

Komponentni to'liq yashirish?
  → null qaytarish

Amaliy misol — to'liq holat boshqaruvi

function MahsulotSahifa({ id }) {
  const { data: mahsulot, yuklanmoqda, xato } = useFetch(`/api/mahsulotlar/${id}`);

  // Early return — muammo holatlar
  if (yuklanmoqda) return <div className="spinner">Yuklanmoqda...</div>;
  if (xato) return <div className="xato">Xato: {xato}</div>;
  if (!mahsulot) return <div>Mahsulot topilmadi</div>;

  // Asosiy UI — faqat ma'lumot bor bo'lganda
  return (
    <div>
      <h1>{mahsulot.nomi}</h1>
      <p>{mahsulot.narx.toLocaleString()} so'm</p>

      {/* Chegirma faqat bo'lsa ko'rsatiladi */}
      {mahsulot.chegirma > 0 && (
        <span className="chegirma">-{mahsulot.chegirma}%</span>
      )}

      {/* Stok holatiga qarab */}
      {mahsulot.stokda
        ? <button>Savatga qo'shish</button>
        : <p className="tugagan">Stokda yo'q</p>
      }
    </div>
  );
}

Xulosa

if/else    → murakkab, ko'p holat
ternary    → ikki holat, JSX ichida
&&         → bitta holat (lekin 0 bilan ehtiyot bo'ling)
null       → komponentni to'liq yashirish

Keyingi dars

27-dars: List Rendering — map, key nima uchun muhim, index ishlatmaslik