Listeleri Render Etmek

Genellikle bir veri topluluğundan birden fazla benzer bileşen göstermek isteyeceksiniz. Bir veri dizisini manipule etmek için JavaScript dizi metodlarını kullanabilirsiniz. Bu sayfada, React ile filter() ve map() metodlarını kullanarak bir veri dizisini filtreleyecek ve bir bileşen dizisine dönüştüreceksiniz.

Bunları öğreneceksiniz

Javascript’in map() metodunu kullanarak bir diziden nasıl bileşenler oluşturulur?
Javascript’in filter() metodunu kullanarak yalnızca belirli bileşenler nasıl oluşturulur?
React anahtarlarını ne zaman ve neden kullanmalıyız?

Dizilerden veri render etmek

Aşağıdaki gibi bir listeniz olduğunu düşünelim.

<ul>
  <li>Creola Katherine Johnson: mathematician</li>
  <li>Mario José Molina-Pasquel Henríquez: chemist</li>
  <li>Mohammad Abdus Salam: physicist</li>
  <li>Percy Lavon Julian: chemist</li>
  <li>Subrahmanyan Chandrasekhar: astrophysicist</li>
</ul>

Bu liste öğeleri arasındaki tek fark içerikleri, verileridir. Arayüzler oluştururken farklı veriler kullanan aynı bileşenin birkaç örneğini göstermeniz gerekebilir: yorum listeleri ya da profil resimleri galerileri gibi. Bu gibi durumlarda, gerekli verileri Javascript objeleri ve dizilerinde saklayabilir ve map() ve filter() gibi metodları kullanarak bu verilerden bileşen listeleri oluşturabilirsiniz.

Aşağıdaki kısa örnekte bir diziden nasıl öğe listesi oluşturulduğunu görebilirsiniz.

Verinizi bir dizi içine aktarın:

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
];

Map metodu ile people üyelerini listItems adında yeni bir JSX node dizisine atayın:

const listItems = people.map(person => <li>{person}</li>);