Listlarni ko'rsatish (Rendering lists)
Ushbu maqolada biz arrayning map() va filtr() metodlari orqali ma'lumotlar array'ini (to'plamini) komponentlar array'iga o'zgartirishni o'rganamiz.
const people = [
'Creola Katherine Johnson: mathematician',
'Mario JosĂ© Molina-Pasquel HenrĂquez: chemist',
'Mohammad Abdus Salam: physicist',
'Percy Lavon Julian: chemist',
'Subrahmanyan Chandrasekhar: astrophysicist',
'Davron Parpiev: Full Stack Engineer'
];
2. Arrayning map() metodi yordamida elementlarni o'zgartiramiz:
3. listItems ni <ul> ga o'rab return qilamiz:
const people = [
'Creola Katherine Johnson: mathematician',
'Mario JosĂ© Molina-Pasquel HenrĂquez: chemist',
'Mohammad Abdus Salam: physicist',
'Percy Lavon Julian: chemist',
'Subrahmanyan Chandrasekhar: astrophysicist',
'Davron Parpiev: Full Stack Engineer'
];
export default function List() {
const listItems = people.map(person =>
<li>{person}</li>
);
return <ul>{listItems}</ul>;
}
⚠️ Diqqat list ichidagi har bir list item unique bo'lgan key propga ega bo'lishi kerak
Array elementlarini filtrlash
Quyida yuqoridagi arrayni biroz murakkablashtiramiz:
const people = [{
id: 0,
name: 'Creola Katherine Johnson',
profession: 'mathematician',
}, {
id: 1,
name: 'Mario JosĂ© Molina-Pasquel HenrĂquez',
profession: 'chemist',
}, {
id: 2,
name: 'Mohammad Abdus Salam',
profession: 'physicist',
}, {
id: 3,
name: 'Percy Lavon Julian',
profession: 'chemist',
}, {
id: 4,
name: 'Subrahmanyan Chandrasekhar',
profession: 'astrophysicist',
}];
Aytaylik, biz faqat arraydan kasbi 'chemist' bo'lganlarni ajratib olaylik. Bunda bizga arrayning filter() metodi qo'l keladi. Bu metod berilgan shartga asosan array elementlarini filtrlab shartga mos kelganlarni yangi array sifatida qaytaradi.
1. chemists nomli array'ga ma'lumotlarni filtrlab joylaymiz:
const chemists = people.filter(person => person.profession === 'chemist' );
2. Endi esa map() metodidan foydalanamiz:
const listItems = chemists.map(person =>
<li>
<img
src={getImageUrl(person)}
alt={person.name}
/>
<p>
<b>{person.name}:</b>
{' ' + person.profession + ' '}
known for {person.accomplishment}
</p>
</li>
);
3. Yakunda listItems ni <ul></ul> ga o'rab qaytaramiz:
import { people } from './data.js';
import { getImageUrl } from './utils.js';
export default function List() {
const chemists = people.filter(person =>
person.profession === 'chemist'
);
const listItems = chemists.map(person =>
<li>
<img src={getImageUrl(person)} alt={person.name}/>
<p> <b>{person.name}:</b> {' ' + person.profession + ' '}
known for {person.accomplishment}
</p>
</li>
);
return <ul>{listItems}</ul>;
}
Bu yerda ma'lumotlar data.js va utils.js fayllaridan import qilingan:
export function getImageUrl(person) {
return (
'https://i.imgur.com/' +
person.imageId +
's.jpg'
);
}
Agar { } gulli qavslar ishlatilsa return kalit so'zi ishlatilishi kerak. Aks holda return kerak bo'lmaydi.
const listItems = chemists.map(person =>
<li>...</li> // Implicit return!
);
const listItems = chemists.map(person => { // Curly brace
return <li>...</li>;
});
Yana yuqoridagi kabi har bir list itemga unique key kerakligi haqida ogohlantirish chiqadi konsolda.
Shuning uchun biz har bir array item ga key berishimiz kerak. key string yoki number bo'lishi mumkin. Bu key shu key berilgan itemni arraydagi boshqa elementlardan ajratib olish uchun ishlatiladi.