Listeleri Render Etmek

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.

1. 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'
];

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

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

3. Return ifadesini kullanarak <ul> elementi içinde listItems’ı döndürün:

return <ul>{listItems}</ul>;

İşte sonuç:

Yukarıdaki sandbox’un bir konsol hatası gösterdiğine dikkat edin:

Bu hatayı daha sonra bu sayfada nasıl düzelteceğinizi öğreneceksiniz. Buna gelmeden önce, verilerinize biraz yapı ekleyelim.

Bir diziyi filtreleme

Bu veriler daha da yapılandırılabilir.

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',
}];

Diyelim ki sadece mesleği 'chemist' olan kişileri göstermenin bir yolunu istiyorsunuz. Javacript’in filter() metodunu kullanarak yalnızca bu kişileri döndürebilirsiniz. Bu yöntem, bir diziyi alır, onları bir “testten” (doğru veya yanlış döndüren bir test) geçirir ve yalnızca testi geçen (doğru olarak döndürülen) öğelerden oluşan yeni bir dizi oluşturur.

Sadece mesleği 'chemist' olan kişileri istiyorsunuz. Bunun için “test” fonksiyonu (person) => person.profession === 'chemist' şeklindedir. Bunu nasıl bir araya getireceğiniz aşağıda gösterilmiştir:

1. Sadece “chemist” mesleğindeki insanlardan yeni bir chemists dizisi oluştur, bunun için filter() metodunu people dizisinde person.profession === 'chemist' şeklinde kullanabilirsin:

const chemists = people.filter(person =>
  person.profession === 'chemist'
);

2. Şimdi chemists dizisinde map metodu kullanılır:

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. Son olarak, bileşeninizden listItems döndürülür:

return <ul>{listItems}</ul>;

const listItems = chemists.map(person =>
  <li>...</li> // Implicit return!
);

const listItems = chemists.map(person => { // Curly brace
  return <li>...</li>;
});

key (anahtar) prop’u ile liste öğelerini sıralı şekilde tutmak

Yukarıdaki tüm sandbox’ların konsolda bir hata gösterdiğine dikkat edin:

Her bir dizi öğesine bir key (anahtar) vermelisiniz — dizideki her bir öğeyi birbirinden ayırt edecek şekilde o öğeye bir string ya da numara vermeniz gerekmektedir:

<li key={person.id}>...</li>

Anahtarlar, React’e her bir bileşenin hangi dizi öğesine karşılık geldiğini söylerek React’in daha sonra bu öğeleri eşleştirmesini sağlar. Bu durum, eğer dizi öğeleriniz yer değiştiriyorsa (örneğin sıralaması değişiyorsa), yeni öğeler eklenip veya çıkartılabiliyorsa daha önemli bir hale gelir. İyi seçilmiş bir anahtar React’in değişen öğelerde ne olduğunu anlamasına ve DOM ağacında doğru güncellemeleri yapmasına yardımcı olur.

Anında anahtar oluşturmak yerine, anahtarları verilerinize dahil etmelisiniz:

import { Fragment } from 'react';

// ...

const listItems = people.map(person =>
  <Fragment key={person.id}>
    <h1>{person.name}</h1>
    <p>{person.bio}</p>
  </Fragment>
);

anahtar nereden gelir

Farklı veri kaynakları, farklı anahtar kaynakları sağlar:

• Veritabanından gelen veri: Eğer veriniz bir veritabanından geliyorsa, doğasından ötürü zaten benzersiz olan veritabanı anahtarları/ID’leri kullanılabilir.
• Yerel olarak oluşturulmuş veriler: Eğer veriniz yerel olarak oluşturuluyor ve saklanıyorsa (örneğin not alma aplikasyonundaki notlar), sıralı olarak artan numaralar crypto.randomUUID() ya da uuid gibi bir paket kullanabilirsiniz.

Anahtarların kuralları

• Anahtarlar kardeşler arasında benzersiz olmalıdır. Ancak, farklı dizilerdeki JSX node’ları için aynı anahtarları kullanmakta bir sakınca yoktur.
• Anahtarlar değişmemelidir. yoksa bu anahtarların bütün amacını bozar! Anahtarları render etme sırasında üretmeyiniz.

React neden anahtarlara ihtiyaç duyar?

Masaüstünüzdeki dosyaların isimlerinin olmadığını düşünün. Bunun yerine, dosyalara sıralarına göre referans edersiniz — ilk dosya, ikinci dosya gibi. Bu sisteme alışabilirsiniz ama bir dosyayı sildiğiniz zaman durum kafa karıştırıcı bir hale gelecektir. İkinci dosya birinci, üçüncü dosya ise ikinci dosya olurdu gibi.

Dosya isimleri de dizilerdeki JSX anahtarları gibi aynı amaca hizmet etmektedir. Anahtarlar, kardeşleri arasında bir öğeyi benzersiz bir şekilde tanımlamamıza olanak sağlar. İyi seçilmiş bir anahtar, dizi içindeki pozisyondan daha fazla bilgi sağlar. Örneğin sıra yeniden sıralama nedeniyle değişse bile, anahtar React’in öğeyi döngü boyunca tanımasını sağlar.