Chapter 9 — Ro'yxatlar va Key

map() metodi — React'da ro'yxatlarni render qilishning asosiy vositasi. key prop nima uchun kerakligini chuqur tushunish bu bobning maqsadi.

---

9.1 Oddiy Ro'yxat Render Qilish

Example

App.jsx
React JSXNusxalash
01const users = [{ id: 1, name: "Ali" }, { id: 2, name: "Vali" }];
02return (
03  <ul>
04    {users.map((u) => <li key={u.id}>{u.name}</li>)}
05  </ul>
06);

Why Does It Exist?

React ro'yxat elementlari orasidagi farqni bilishi kerak — qaysi element qo'shilgan, o'chirilgan yoki qayta tartiblangan. key — shu elementlarga "barqaror identifikator" beradi.

9.2 index as key Muammosi

Example — MUAMMOLI

App.jsx
React JSXNusxalash
01{todos.map((todo, index) => (
02  <TodoItem key={index} {...todo} />
03))}

⚠️ Common Mistake
Ro'yxat boshiga yangi element qo'shilsa yoki tartib o'zgarsa, indexlar siljib ketadi — React noto'g'ri elementni "o'sha joyda qolgan" deb hisoblab, input holati yoki animatsiya buzilishi mumkin.

Example — TO'G'RI

App.jsx
React JSXNusxalash
01{todos.map((todo) => (
02  <TodoItem key={todo.id} {...todo} />
03))}

9.3 Qo'shish va O'chirish

Example

App.jsx
React JSXNusxalash
01function removeTodo(id) {
02  setTodos(todos.filter((t) => t.id !== id));
03}
04function addTodo(text) {
05  setTodos([...todos, { id: crypto.randomUUID(), text }]);
06}

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Ismlar massividan <ul> ro'yxat yasang, unique key bilan.

🟡 Exercise 2 — Medium

Task: Todo ro'yxatiga yangi element qo'shish va o'chirish funksiyalarini yozing.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01{items.map((item, i) => (
02  <input key={i} defaultValue={item.text} />
03))}

Your Task: Foydalanuvchi ro'yxatni saralasa (sort), inputlardagi matn noto'g'ri joyga "yopishib qolishi" mumkin. Nega?

<details> <summary>Solution</summary> `key={i}` — index asosida, saralashdan keyin bir xil indexdagi element o'zgaradi, lekin React DOM elementini (va uning ichki holatini, masalan input matnini) "o'sha index'dagi komponent" deb hisoblab qoldiradi. Yechim: `key={item.id}` — unique va barqaror identifikator ishlatish. </details>

📌 Chapter Summary

key — React'ga elementlarni farqlashga yordam beradigan barqaror identifikator. indexni faqat ro'yxat hech qachon o'zgarmaydigan holatlarda key sifatida ishlating. Har doim ma'lumotning o'zidagi unique id'dan foydalaning.

🎯 Key Takeaways

• key — reconciliation uchun zarur
• Statik bo'lmagan ro'yxatlarda indexni key sifatida ishlatmang
• Immutable update: filter (o'chirish), spread (qo'shish)

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01{arr.map((item) => <Item key={item.id} {...item} />)}
02setArr(arr.filter((x) => x.id !== id));      // o'chirish
03setArr([...arr, newItem]);                    // qo'shish

---