JSXda ma'lumotlar ro'yxatini ko'rsatish uchun nima ishlatiladi?

JSXда маълумотлар рўйхатини кўрсатиш учун JavaScript массивларининг .map() усулидан фойдаланилади.

// Маъlumotлар массиви мисоли
const items = ['Мавзу 1', 'Мавзу 2', 'Мавзу 3'];

// `.map()` ёрдамида рўйхатни кўрсатиш
const List = () => (
  <ul>
    {items.map((item, index) => (
      // Ҳар бир рўйхат элементи учун уникал калитни ишлатиш зарур
      <li key={index}>{item}</li>
    ))}
  </ul>
);

map() ҳар бир элементни ўтади ва янги React элементлар массивини қайтариб, уларни DOMда рендер қилади. Рўйхатдаги ҳар бир элемент учун уникал key хусусиятини ишлатиш муҳим. Бу Reactга рўйхат ўзгартирилганда самарали интерфейс янгилашга ёрдам беради. key сифатида маълумотларнинг уникал идентификаторини ёки, унинг йўқлигида, массивдаги элементнинг индекси қўлланиши мумкин.