React'te Dinamik Eleman Oluşturma: Range Yardımcı Fonksiyonu

React'te bir dizi içerisindeki her elemanı ekrana basmak için .map() metodunu kullanırız. Ancak, elimizde bir dizi yoksa ne yapabiliriz?

Örneğin, bir puanlama sistemimiz olduğunu düşünelim. Kullanıcının verdiği puana göre 0 ile 5 arasında yıldız göstermek istiyoruz. Bu durumda belirli sayıda yıldız ikonunu nasıl oluştururuz?

Basit Bir Çözüm: for Döngüsü

JavaScript'te böyle bir işlemi genellikle for döngüsü ile yaparız. React'te JSX içinde doğrudan for kullanamıyoruz, ancak döngüyü JSX dışında tanımlayarak bunu aşabiliriz.

function StarRating({ rating }) {
  let stars = [];

  for (let i = 0; i < rating; i++) {
    stars.push(
      <img
        key={i}
        alt=""
        className="gold-star"
        src="https://sandpack-bundler.vercel.app/img/gold-star.svg"
      />
    );
  }

  return <div className="star-wrapper">{stars}</div>;
}

Bu kod, rating değerine bağlı olarak bir yıldız dizisi oluşturur ve JSX içinde render eder.

Daha Fonksiyonel Bir Yaklaşım: range Fonksiyonu

Bu yöntemin yerine daha esnek ve tekrar kullanılabilir bir range fonksiyonu tanımlayabiliriz. range fonksiyonu, belirli bir aralıkta sayı listesi oluşturan bir yardımcı fonksiyondur. JavaScript'te yerleşik olarak bulunmasa da, birçok yardımcı kütüphanede (örneğin Lodash) vardır.

range Fonksiyonunun Tanımı

const range = (start, end, step = 1) => {
  let output = [];
  if (typeof end === "undefined") {
    end = start;
    start = 0;
  }
  for (let i = start; i < end; i += step) {
    output.push(i);
  }
  return output;
};

range Kullanımı

Bu fonksiyonu yıldız oluşturma işleminde kullanabiliriz:

function StarRating({ rating }) {
  return (
    <div className="star-wrapper">
      {range(rating).map((num) => (
        <img
          key={num}
          alt=""
          className="gold-star"
          src="https://sandpack-bundler.vercel.app/img/gold-star.svg"
        />
      ))}
    </div>
  );
}

Bu yöntemle:

• range(rating) fonksiyonu, [0, 1, 2, 3, 4] gibi bir dizi oluşturur.
• .map() metodu, her bir eleman için yıldız oluşturur.
• key olarak dizideki numarayı kullanırız.

Alternatif Yöntem: Array.fill()

Bazı geliştiriciler, modern JavaScript metodlarını kullanarak daha kısa bir çözüm üretmeyi tercih ediyor:

function StarRating({ rating }) {
  return (
    <div className="star-wrapper">
      {Array(rating).fill().map((_, index) => (
        <img
          key={index}
          alt=""
          className="gold-star"
          src="https://sandpack-bundler.vercel.app/img/gold-star.svg"
        />
      ))}
    </div>
  );
}

Bu yöntemde:

• Array(rating).fill() belirli uzunlukta boş bir dizi oluşturur.

• .map() metodu ile her elemana yıldız atanır.

• key olarak indeks değeri kullanılır.

Ancak bu yöntem, range fonksiyonunun sunduğu esneklikten yoksundur. Örneğin, başlangıç değerini değiştiremeyiz ya da belirli bir aralıkla artış yapamayız.

Sonuç

Eğer sadece belirli sayıda eleman oluşturmak istiyorsanız Array.fill() yeterli olabilir. Ancak, daha esnek ve tekrar kullanılabilir bir çözüm istiyorsanız range fonksiyonunu kullanmanız daha mantıklıdır.

Bu gibi yardımcı fonksiyonları projelerinizde tekrar tekrar kullanabileceğiniz utils.js dosyanıza eklemek iyi bir alışkanlık olacaktır.

Sen hangi yöntemi tercih edersin? 🎯