Ro'yxatlar va Key'lar

.map bilan ro'yxatni render qilish

Ko'pincha sizda ma'lumot array'i bo'ladi va har bir element uchun bitta elementni ko'rsatishni xohlaysiz. React'da standart usul — bu array'ning .map method'i bo'lib, u har bir elementni JSX bo'lagiga aylantiradi.

function FruitList() {
  const fruits = ["apple", "banana", "cherry"];
 
  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

.map array bo'ylab yuradi va React tartib bo'yicha render qiladigan <li> elementlarining yangi array'ini qaytaradi. map atrofidagi { }'ga e'tibor bering — bu JSX'ning JavaScript'ga tushishi. (key'ni bir soniya e'tiborsiz qoldiring; u keyingi.)

Nima uchun key kerak

Ro'yxatdagi har bir elementga key kerak — React'ga o'sha element uchun barqaror, noyob ID beradigan prop. React renderlar orasida elementlarni bir-biridan ajratish uchun keylardan foydalanadi, shuning uchun ro'yxat o'zgarganda, hamma narsani qayta chizish o'rniga faqat harakat qilgan narsani yangilashi mumkin. Keylarsiz yangilanishlar sekin yoki xatolik bilan bo'lishi mumkin va React sizni konsolda ogohlantiradi.

Yaxshi key — bu ma'lumotingizdan noyob, barqaror ID — ko'pincha database id:

{users.map((user) => (
  <li key={user.id}>{user.name}</li>
))}

Umumiy qoidalar:

• Mavjud bo'lganda ma'lumotingizdan noyob id ishlating.
• Array index (.map((item, index) => ...)) faqat oxirgi chora sifatida ishlaydi va ro'yxat qayta tartiblansa yoki filtrlansa buglarga sabab bo'lishi mumkin.
• Keylar faqat qo'shni elementlar (siblings) orasida noyob bo'lishi kerak, global emas.

Shartli render qilish

Ba'zan biror narsani faqat ma'lum shartlar ostida ko'rsatasiz. Ikkita keng tarqalgan shakl.

&& — ko'rsatish yoki hech narsa ko'rsatmaslik. Agar chap tomon true bo'lsa, o'ng tomon render qilinadi; agar false bo'lsa, hech narsa render qilinmaydi:

function Inbox({ count }) {
  return (
    <div>
      {count > 0 && <p>You have {count} new messages</p>}
    </div>
  );
}

Bir ehtiyot chorasi: number bilan && tasodifan 0 chop etishi mumkin. Shuning uchun count && ... emas, count > 0 && ... yozing, aks holda count nolga teng bo'lganda adashgan 0 render qilinadi.

Ternary — ikki narsadan birini tanlash. condition ? a : b shakli ikkita chiqishdan birini tanlaydi:

function Status({ isLoggedIn }) {
  return <p>{isLoggedIn ? "Welcome back!" : "Please log in"}</p>;
}

"Ko'rsatish yoki hech narsa" bo'lganda &&'ni, "u yoki bu" bo'lganda ternary'ni ishlating.

Suhbat maslahatlari

• { } ichiga o'ralgan JSX qaytaradigan .map bilan ro'yxatni render qiling.
• key noyob, barqaror id bo'lishi kerakligini va nima uchun array index zaif zaxira variant ekanligini tushuntiring.
• Ikkala shartli shaklni ham ko'rsating — ko'rsatish/yashirish uchun && va u/bu uchun ternary — hamda && bilan 0 tuzog'ini.