Lists

React Lists

React-da ro'yxatlarni qandaydir tsikl yordamida renderlash kerak bo'ladi.

JavaScript map() massiv metodidan foydalanish odatda afzalroqdir.

Agar map() metodi haqida qayta ko'rib chiqmoqchi bo'lsangiz, ES6 bo'limiga qarang.

Misol: Garajimizdagi barcha mashinalarni renderlaymiz:

function Car(props) {
  return <li>Men {props.brand}!</li>;
}
 
function Garage() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>Garajimda kimlar yashaydi?</h1>
      <ul>
        {cars.map((car) => (
          <Car brand={car} />
        ))}
      </ul>
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

Agar bu kodni create-react-app da ishga tushirsangiz, u ishlaydi, lekin ro'yxat elementlari uchun "key" ko'rsatilmaganligi haqida ogohlantirish olasiz.

Kalitlar (Keys)

Kalitlar React-ga elementlarni kuzatishga yordam beradi. Shu tarzda, agar biror element yangilansa yoki o'chirilsa, faqat shu element qayta renderlanadi, butun ro'yxat emas.

Kalitlar har bir singil uchun noyob bo'lishi kerak. Ammo global darajada takrorlanishi mumkin.

Umumiy qoida sifatida, kalit har bir elementga tayinlangan noyob ID bo'lishi kerak. Oxirgi chora sifatida, massivning indeksini kalit sifatida ishlatishingiz mumkin.

Misol: Oldingi misolimizni kalitlarni qo'shib qayta ishlaymiz:

function Car(props) {
  return <li>Men {props.brand}!</li>;
}
 
function Garage() {
  const cars = [
    { id: 1, brand: 'Ford' },
    { id: 2, brand: 'BMW' },
    { id: 3, brand: 'Audi' },
  ];
  return (
    <>
      <h1>Garajimda kimlar yashaydi?</h1>
      <ul>
        {cars.map((car) => (
          <Car key={car.id} brand={car.brand} />
        ))}
      </ul>
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);