React: shartli ko'rinish

Forma darsida xato xabarini {error && <p>...</p>} deb chiqardik. Bu naqsh React’da har qadamda uchraydi: yuklanmoqda belgisi, bo’sh ro’yxat xabari, tizimga kirgan foydalanuvchi menyusi. Bu darsda uning to’liq qoidalarini va bitta xavfli tuzog’ini ko’ramiz.

&& — shart bajarilsa ko’rsatish

Eng qisqa usul:

function TaskList({ tasks, error }) {
  return (
    <div>
      {error && <p className="error">{error}</p>}
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    </div>
  );
}

error bo’sh matn bo’lsa xabar chiqmaydi. Matn bo’lsa — chiqadi.

Ishlash mantig’i sof JavaScript:

// && chap tomon yolg'on bo'lsa, o'sha qiymatni qaytaradi
false && <p>Xato</p>     // → false
"" && <p>Xato</p>        // → ""
"Xato yuz berdi" && <p>Xato</p>   // → <p>Xato</p>

JSX darsidagi jadvalni eslang: false, null, undefined va "" ekranda hech nima chizmaydi. Shuning uchun shart bajarilmaganda joy bo’sh qoladi.

Nol tuzog’i

Endi eng ko’p chalkashtiradigan joy. Ro’yxatdagi vazifalar sonini ko’rsatmoqchisiz:

// ❌ Tuzoq
function TaskList({ tasks }) {
  return (
    <div>
      {tasks.length && <p>Jami: {tasks.length} ta vazifa</p>}
    </div>
  );
}

Ro’yxat to’la bo’lsa hammasi joyida. Ro’yxat bo’sh bo’lsa ekranda kutilmagan narsa paydo bo’ladi:

<div>0</div>

Ekranda yolg’iz 0 turadi.

Uch yechim bor:

// ✅ 1. Aniq taqqoslash — eng yaxshisi
{tasks.length > 0 && <p>Jami: {tasks.length} ta vazifa</p>}

// ✅ 2. Mantiqiy qiymatga aylantirish
{Boolean(tasks.length) && <p>Jami: {tasks.length} ta vazifa</p>}

// ✅ 3. Ternar operator
{tasks.length ? <p>Jami: {tasks.length} ta vazifa</p> : null}

Birinchisi afzal: u niyatni aniq ko’rsatadi va qo’shimcha funksiya talab qilmaydi.

Qoidani shunday eslang: && chap tomonida doim mantiqiy qiymat tursin. Son bo’lsa > 0, massiv bo’lsa .length > 0, obyekt bo’lsa !== null.

Ternar — ikki variantdan biri

Shart bajarilsa bir narsa, bajarilmasa boshqasi kerak bo’lsa:

function UserGreeting({ user }) {
  return (
    <div>
      {user ? (
        <p>Xush kelibsiz, {user.name}!</p>
      ) : (
        <button type="button">Tizimga kirish</button>
      )}
    </div>
  );
}

user bo’lsa salomlashuv, bo’lmasa tugma chiqadi.

Ternar atribut ichida ham ishlatiladi — bu juda keng tarqalgan:

<li className={task.isDone ? "done" : "active"}>{task.title}</li>
<button type="button" disabled={isLoading ? true : false}>Yuborish</button>

Ikkinchi misolda ternar ortiqcha — disabled={isLoading} yetarli. Mantiqiy qiymatni ternar bilan mantiqiy qiymatga aylantirish keraksiz ish.

JSX’ni o’zgaruvchiga saqlash

Shart murakkab bo’lsa, JSX’ni oldindan tayyorlang:

function TaskList({ tasks, isLoading, error }) {
  let content;

  if (isLoading) {
    content = <p>Yuklanmoqda...</p>;
  } else if (error) {
    content = <p className="error">{error}</p>;
  } else if (tasks.length === 0) {
    content = <p>Hozircha vazifa yo'q.</p>;
  } else {
    content = (
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    );
  }

  return (
    <section>
      <h2>Vazifalar</h2>
      {content}
    </section>
  );
}

export default TaskList;

Bu yerda if/else ishlatilyapti, chunki u JSX’dan tashqarida turibdi. JSX ichida if yozib bo’lmasligini JSX darsida ko’rgansiz.

To’rt holat aniq ajratilgan va har birini alohida o’qish mumkin. Aynan shu tuzilma serverdan ma’lumot yuklash darsida asosiy naqsh bo’ladi.

Ertaroq qaytarish

Komponent butunlay boshqa narsa ko’rsatishi kerak bo’lsa, darrov qaytaring:

function TaskList({ tasks, isLoading }) {
  if (isLoading) {
    return <p>Yuklanmoqda...</p>;
  }

  if (tasks.length === 0) {
    return <p>Hozircha vazifa yo'q. Birinchisini qo'shing.</p>;
  }

  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
}

Asosiy holat oxirida qoladi va u ichma-ich shartlarga o’ralmaydi.

null qaytarish — hech nima ko’rsatmaslik

Komponent ba’zan umuman ko’rinmasligi kerak:

function Notification({ message }) {
  if (!message) {
    return null;
  }

  return <div className="notification">{message}</div>;
}

export default Notification;

null qaytarish — “men bu safar hech nima chizmayman” degani. Komponent o’zi yashab turadi, holati saqlanadi, faqat DOM’da iz qoldirmaydi.

Ro’yxatni filtrlash

Shartli ko’rinishning keng tarqalgan qo’llanishi — filtr tugmalari:

import { useState } from 'react';

const tasks = [
  { id: 1, title: "Non olish", isDone: false },
  { id: 2, title: "Kitob o'qish", isDone: true },
  { id: 3, title: "Xat yozish", isDone: false },
];

function TaskList() {
  const [filter, setFilter] = useState("all");

  const visibleTasks = tasks.filter((task) => {
    if (filter === "active") return !task.isDone;
    if (filter === "done") return task.isDone;
    return true;
  });

  return (
    <div>
      <button type="button" onClick={() => setFilter("all")}>
        Hammasi
      </button>
      <button type="button" onClick={() => setFilter("active")}>
        Faol
      </button>
      <button type="button" onClick={() => setFilter("done")}>
        Bajarilgan
      </button>

      {visibleTasks.length > 0 ? (
        <ul>
          {visibleTasks.map((task) => (
            <li key={task.id}>{task.title}</li>
          ))}
        </ul>
      ) : (
        <p>Bu filtrga mos vazifa yo'q.</p>
      )}
    </div>
  );
}

export default TaskList;

“Faol” tugmasini bosing — ikkita vazifa qoladi. “Bajarilgan” — bittasi.

visibleTasks holatda saqlanmaydi, har chizishda tasks va filter dan hisoblanadi. Bu muhim naqsh: boshqa holatdan hisoblash mumkin bo’lgan narsani holatda saqlamang. Aks holda ikkalasini mos ushlab turish kerak bo’ladi — bu React nima darsidagi muammoning qaytishi.

Qaysi usulni tanlash

Holat Usul
Bor bo’lsa ko’rsat {value && <div />}
Ikki variantdan biri {cond ? <A /> : <B />}
Uch va undan ko’p holat if/else + o’zgaruvchi
Butunlay boshqa ko’rinish Ertaroq return
Hech nima ko’rsatmaslik return null
Atribut qiymati Ternar yoki to’g’ridan-to’g’ri qiymat

Amaliy mashq

  1. Notification komponentini yozing: message bo’sh bo’lsa null qaytarsin.
  2. {tasks.length && <p>Jami: {tasks.length}</p>} deb yozing va tasks ni bo’sh massivga almashtiring. Ekranda 0 chiqqanini ko’ring.
  3. Uni tasks.length > 0 && ga tuzatib, 0 yo’qolganini tekshiring.
  4. TaskList ni isLoading, error va bo’sh ro’yxat holatlarini qamraydigan qilib if/else bilan yozing.
  5. Filtr tugmalarini qo’shing va har filtrda nechta vazifa qolayotganini sanang.
  6. useState qatorini ertaroq return dan keyinga ko’chiring, chiqqan xatoni o’qing va qaytaring.

2-qadam bu darsning asosiy sababi: 0 ekranda paydo bo’lganda sababini bilmasangiz, uni qidirish ko’p vaqt oladi.

Qisqacha xulosa

  • {shart && <div />} — shart bajarilsa ko’rsatadi, aks holda joy bo’sh qoladi.
  • {0 && <div />} ekranda 0 chizadi — && chap tomondagi yolg’on qiymatning o’zini qaytaradi, 0 esa ko’rinadigan qiymat; yechim — chap tomonda doim mantiqiy qiymat tursin: tasks.length > 0.
  • Ternar ikki variantdan birini tanlaydi va atribut ichida ham ishlaydi; ichma-ich yozilmaydi.
  • Uch va undan ko’p holatda JSX’ni o’zgaruvchiga saqlang yoki ertaroq return ishlating.
  • Ertaroq return hook’lardan keyin turishi shart.
  • return null — komponent bu safar hech nima chizmaydi.
  • Hisoblash mumkin bo’lgan qiymatni (visibleTasks) holatda saqlamang.

Keyingi darsda useEffect — React’dan tashqaridagi ishlar: timer, brauzer API va tarmoq so’rovi.

Bu dars foydali bo'ldimi?

—
— marta ko'rildi