List Rendering — map, key nima uchun muhim, index ishlatmaslik

~15 daq · React · Component Patterns

Ro'yxat ko'rsatish

Ilovada ro'yxatlar juda ko'p — foydalanuvchilar, mahsulotlar, xabarlar, bildirishnomalar. Bularni ekranda ko'rsatish uchun .map() ishlatiladi.

const mevalar = ['Olma', 'Nok', 'Uzum'];

function App() {
  return (
    <ul>
      {mevalar.map(meva => (
        <li key={meva}>{meva}</li>
      ))}
    </ul>
  );
}

Natija:

• Olma
• Nok
• Uzum

key — nima uchun kerak?

key bo'lmasa React warning beradi. Lekin bu faqat warning emas — key bo'lmasa React noto'g'ri ishlashi mumkin.

Nima uchun kerak? React ro'yxatni qayta chizayotganda qaysi element o'zgardi, qaysi yangi qo'shildi, qaysi o'chirildi ni bilishi kerak. key — har bir elementning "pasporti".

Oldingi ro'yxat:    Yangi ro'yxat:
key=1 → Ali         key=1 → Ali      ← o'zgarmadi
key=2 → Vali        key=3 → Soli     ← yangi qo'shildi
key=3 → Soli        (key=2 yo'q)     ← o'chirildi

key bo'lmasa React tartib bo'yicha solishtiradi — bu noto'g'ri natija beradi.

key sifatida index ishlatmaslik

// ❌ Yomon
{users.map((user, index) => (
  <li key={index}>{user.ism}</li>
))}

Nima uchun yomon? Ro'yxat o'rtasidan element o'chirilsa — indexlar siljiydi:

O'chirishdan oldin:    O'chirishdan keyin:
key=0 → Ali           key=0 → Ali
key=1 → Vali    →     key=1 → Soli   ← React "Vali o'zgardi" deb o'ylaydi
key=2 → Soli          (yo'q)         ← React "Soli o'chirildi" deb o'ylaydi

React noto'g'ri elementni yangilaydi. Ayniqsa input ichida matn yozilgan bo'lsa — matn noto'g'ri elementga "ko'chib" qoladi.

// ✅ To'g'ri — ma'lumotdagi unikal id
{users.map(user => (
  <li key={user.id}>{user.ism}</li>
))}

key qoidalari

✅ Unikal bo'lishi kerak — bir ro'yxat ichida
✅ Barqaror bo'lishi kerak — qayta render da o'zgarmasligi kerak
✅ Ma'lumotdagi id — eng yaxshi tanlov

❌ index — ro'yxat o'zgarsa noto'g'ri
❌ Math.random() — har render da yangi, React chalkashadi
❌ Boshqa komponentga props sifatida o'tmaydi

💡 key — React uchun, foydalanuvchi uchun emas. Komponent ichida props.key deb olish mumkin emas. Agar ID ni komponentga ham berish kerak bo'lsa — alohida prop sifatida yuboring:

<UserKarta key={user.id} id={user.id} ism={user.ism} />

Murakkab ro'yxatlar

Ob'ektlar massivi

const mahsulotlar = [
  { id: 1, nomi: 'Noutbuk', narx: 8500000, stokda: true },
  { id: 2, nomi: 'Telefon', narx: 3200000, stokda: false },
  { id: 3, nomi: 'Quloqchin', narx: 450000, stokda: true },
];

function MahsulotRoyxati() {
  return (
    <div>
      {mahsulotlar.map(m => (
        <div key={m.id} className="karta">
          <h3>{m.nomi}</h3>
          <p>{m.narx.toLocaleString()} so'm</p>
          {m.stokda
            ? <span className="yashil">Bor</span>
            : <span className="qizil">Yo'q</span>
          }
        </div>
      ))}
    </div>
  );
}

Filtrlash va ko'rsatish

function FaolFoydalanuvchilar({ users }) {
  return (
    <ul>
      {users
        .filter(u => u.faol)           // faqat faollarni
        .sort((a, b) => a.ism.localeCompare(b.ism))  // ismi bo'yicha
        .map(u => (
          <li key={u.id}>{u.ism}</li>
        ))
      }
    </ul>
  );
}

Bo'sh holat

function VazifaRoyxati({ vazifalar }) {
  if (vazifalar.length === 0) {
    return <p>Hech qanday vazifa yo'q 🎉</p>;
  }

  return (
    <ul>
      {vazifalar.map(v => (
        <li key={v.id}>{v.matn}</li>
      ))}
    </ul>
  );
}

Xulosa

.map() → massivni JSX ga aylantirish
key    → har bir elementga unikal identifikator

key qoidasi:
  ✅ ma'lumotdagi id
  ❌ index (ro'yxat o'zgarsa)
  ❌ Math.random()

Keyingi dars

28-dars: Controlled Component — input, select, textarea bilan ishlash