Chapter 8 — Shartli Render

State va props asosida UI'ning turli holatlarini (loading, error, bo'sh) ko'rsatish — shartli render orqali amalga oshiriladi.

---

8.1 Ternary va && Operatori

Example

App.jsx
React JSXNusxalash
01return isLoading ? <Spinner /> : <Content />;
02return <div>{isLoggedIn && <Dashboard />}</div>;

⚠️ Common Mistake
{count && <Badge />} — agar count 0 bo'lsa, ekranda "0" raqami chiqib qoladi (0 falsy, lekin render qilinadi). To'g'risi: {count > 0 && <Badge />}.

8.2 Guard Clause

Example

App.jsx
React JSXNusxalash
01function UserProfile({ user }) {
02  if (!user) {
03    return <p>Foydalanuvchi topilmadi</p>;
04  }
05  return <h2>{user.name}</h2>;
06}

8.3 Loading / Error / Empty / Success Holatlari

Example

App.jsx
React JSXNusxalash
01function ProductList({ products, isLoading, error }) {
02  if (isLoading) return <Spinner />;
03  if (error) return <ErrorMessage text={error} />;
04  if (products.length === 0) return <p>Mahsulot topilmadi</p>;
05  return products.map((p) => <ProductCard key={p.id} {...p} />);
06}

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: isOnline asosida "🟢 Online" / "⚪ Offline" matnini ko'rsating.

🟡 Exercise 2 — Medium

Task: cartItems.length asosida "Savat bo'sh" yoki mahsulotlar ro'yxatini ko'rsating.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function Notifications({ count }) {
02  return <div>{count && <span className="badge">{count}</span>}</div>;
03}

Your Task: count = 0 bo'lganda ekranda nima ko'rinadi va bu nega muammo?

<details> <summary>Solution</summary> Ekranda "0" raqami ko'rinib qoladi, chunki `0 && <span>` ifodasi `0`ga baholanadi va React uni render qiladi. Yechim: ```jsx {count > 0 && <span className="badge">{count}</span>} ``` </details>

📌 Chapter Summary

Ternary — ikki variant orasida tanlash uchun. && — faqat bitta shart to'g'ri bo'lganda render qilish uchun (0/NaN bilan ehtiyot bo'ling). Guard clause — komponentni ichma-ich shartlardan qutqaradi.

🎯 Key Takeaways

• Ternary — A yoki B, && — faqat A
• && bilan sonlarni tekshirishda ehtiyot bo'ling (0 muammosi)
• Guard clause — erta qaytarish orqali kodni soddalashtiradi

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01{cond ? <A /> : <B />}
02{cond && <A />}
03if (!data) return <Empty />;

---