ReactJS Map Kullanımı

Diziler için çok kullanılan ve bir metod olan map React JS ile geliştirme yaparken de geliştiricilerin çok faydalandıkları bir metoddur. Array map metodu orjinal diziyi değiştirmeden dizideki tüm elemanlar üzerinde işlem yaparak yeni bir dizi oluşturur. Array map ile ilgili olarak JavaScript Array Map Metodu ve Kullanımı yazımıza bakabilirsiniz.

Array.map Metodu Nedir?

Array.map metodu bir dizi elemanları tek tek bir callback fonksiyonuna vererek her elaman için işlem yapan ve bu işlemler sonucunda yeni bir dizi oluşturur. Orjinal dizi elemanlarını değiştirmez.

Array.map((value, index) => { ... })

Şeklinde bir formatı vardır. Map metodu bize iki değişken verir, bunlar value ve index değişkenleridir. Burada value o anki elamanın değeridir. index o anki elemanın indeksidir. index seçimliktir. İsterseniz kullanmayabilirsiniz.

Bu bölümde React JS ile map kullanımına değineceğiz. React ile geliştirme yaparken map metodu genellikle dizi içerisindeki elemanları bellirli bir formatta sokarak ekrana basmak için kullanılır.

map() Örnek Kullanım

Mesela elimizde ürün listesi bulunsun. Bir array olan bu listenin her elemanı ürün bilgilerini içeren bir obje olsun. Ürün bilgileri

    {
        id: urunId,
        name: "Ürün adı",
        price: urunFiyati
    }

şeklinde olsun. Şimdi sayfamız içerisinde bir liste içerisinde ürün adını ve fiyatını göstermek isteyelim. Bu işlemi UrunListele adlı bir komponent içerisinde yapabiliriz.

import React from 'react';

function UrunListele() {
    // Ürün listesi
    const urunler = [
        {
            id: 1,
            name: "Domates Salçası",
            price: 39
        },
        {
            id: 2,
            name: "Makarna",
            price: 8
        },
        {
            id: 3,
            name: "Prinç",
            price: 25
        },
        {
            id: 4,
            name: "Mercimek",
            price: 29
        },
        {
            id: 5,
            name: "Un",
            price: 22
        }
    ]

    const urunListesi = () => urunler.map(urun => <li key={urun.id}>{urun.name} - {urun.price}tl</li>);

    return (
        <div>
            <h2>Ürün Listesi</h2>
            <ul>{urunListesi()}</ul>
        </div>
    )
}

export default UrunListele;

Bu kodu incelersek, return ifadesi içerisinde bir adet ul etiketi ile bir liste oluşturuluyor. Listenin elemanları ise urunListesi adlı fonksiyon tarafından oluşturuluyor. Bu fonksiyona baktığımızda

const urunListesi = (urunler) => urunler.map(urun => <li key={urun.id}>{`$urun.name} - ${urun.price}`</li>;

array fonksiyon olarak tek satırda yazılmış bir fonksiyon. urunler dizisini maplıyor. Tek tek her ürünü alıyor ve li etiketi içerisinde bu ürünlerin isim ve fiyatlarını listeliyor.

Ayrıca li etiketine için bir adet key değeri geçiliyor. Bu React tarafından istenen bir durum. Liste elemanlarını daha rahat kontrol etmek için her elemana tekil (uniq) bir değer vermemizi istiyor. Biz burada urunünün id değerini kullanıyoruz. Bazı durumlarda map fonksiyonunun bize verdiği index değeri de kullanabiliriz. Çünkü index değeri uniq bir değerdir. Eğer key değerini geçmezsek uygulama çalışsa da React hata mesajı verecektir.

Aslında isteseydik urunListesi fonksiyonunu return içerisinde de kullanabilirdik. Fakat bu biraz daha temiz bir görünüm sağlıyor. Şimdi return ifadesi içerisinde bir kullanım görelim.

React map() Örnek Kullanım

Elimizde bir üye listesi olduğunu ve üye isimlerini listelememiz gerektiğini varsayalım.

import React from 'react';

function Uyeler() {
    // İsim listesi
    const uyeler = [
        'Ahmet Koşan',
        'Alim Demir',
        'Hasan Şahin',
        'Nuri Özgüven',
        'Selim Çelik'
    ]

    return (
        <div>
            <h2>Üye Listesi</h2>
            <ul>
                {
                   uyeler.map((isim, index) => <li key={index}>{isim}</li>) 
                }
            </ul>
        </div>
    )
}

export default Uyeler;

Bu örneğimizde tüm işlemi return ifadesi içerisinde yaptık. ul etiketini açtıktan sonra içerisinde JavaScript kodunu çağırdık. uyeler dizisini mapladık ve her dizi elemanında bulunan üye ismini li etiketi içerisinde geri dönderdik. Ayrıca li etiketi için key değerine map metodu tarafından bize verilen index değerini atadı.

Bu iki örneğimizde de map metodu içerisindeki callback fonksiyonunu yazarken return ifadesi kullanmadık. Bildiğiniz gibi arrow fonksiyonlar eğer tek satırlık ise o fonksiyon kendiliğinde bir return ifadesi koyacaktır. Eğer çok satırlı bir callback fonksiyonu kullansaydık sonucu return etmemiz gerekecekti. Aksi halde bir hata oluşacaktır.

Konu ile ilgili kodları Githup reposundan alabilirsiniz. Eklemek veya sormak istedikleriniz varsa yorum bölümünden bize ulaşabilirsiniz.