React For Döngüsü

React ile uygulama geliştirirken JSX içerisinde for döngüsü kullanamayız. Bunun anlamı for dögüsüne her ihtiyacımız olduğunda JSX içerisinde çağıramayız demektir. Bununla birlikte farklı yöntemler ile bu işlemi yapabiliriz.

Şimdi hatalı bir örnek kullanımı görelim. Örneğimizde sayfaya bir liste bastırmaya çalışacağız.

import React from 'react';

function App() {
    const meyveler = ['Elma', 'Armut', 'Üzüm', 'Portakal', 'Kayısı'];
    return (
        <div>
            <h3>Meyveler</h3>
                <ul>
                {
                    for( let i = 0; i++; i < meyveler.length) <li>{meyveler[i]}</li>
                }
                </ul>
        </div>
    );
}

export default App;

Örneğimizi çalıştırdığımızda

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/selami/Çalışmalar/Patika/Frontend Orta Seviye/react_projeleri/hello-app/src/App.js: Unexpected token (11:18)

src/App.js
  Line 11:18:  Parsing error: Unexpected token (11:18)

benzeri bir hata alacağız. Bu React JS içerisindeki döngü kullanımına getirilen sınırlamalardan gelir. JSX içerisinde direkt olarak for döngüsünü kullanamayız. Peki bu hatanın çözümü nedir?

React JS JSX İçerisinde for Döngüsünü Kullanma

React for kullanımı bazı durumlarda kafa karışıklığına neden olabiliyor. JSX içerisinde for döngüsünü kullanmanın en kolay yolu, return ifadesinden önce bir fonksiyona kullanacağımız ifadeyi geçirmek ve sonrasında bunu ihtiyacımız olan yerde kullanmaktır.

import React from 'react'

function App() {
  const meyveler = ["Elma", "Armut", "Üzüm", "Portakal", "Kayısı"];
  
  const meyveleriListele = () => {
    let liste = [];
    for (let i = 0; i < meyveler.length; i++)
      liste.push(<li key={i}>{meyveler[i]}</li>);
    return liste;
  };
  return (
    <div>
      <h3>Meyveler</h3>
      <ul>{meyveleriListele()}</ul>
    </div>
  );
}

export default App;

Örneğimizde gördüğümüz gibi bu işlemi yapabilmek için

• Önce meyveleriListele şeklinde bir fonksiyon yazdık.
• Fonksiyon içerisinde liste adında bir dizi oluşturduk.
• Oluşturacağımız içeriği bu listenin içerisine ekledik.
• Sonra bu listeyi return ifadesi ile geri döndük.
• Geri gelen listeyi JSX içerisinde kullandık.

tüm yapmamız gereken bu kadar. Artık oluşturduğumuz listeyi JSX içerisinde kullanabileceğiz.

Sonuç

JSX içerisinde döngü işlemleri için map metodunu kullanıyoruz. Fakat bazı durumlarda for, for-of, for-in gibi diğer döngüleri de kullanmamız gerekebilir. Bu gibi durumlarda yapılacak işlemleri return ifadesinin dışarısında yapıyoruz. Ve sonucu geri dönderiyoruz.

ReactJS Map Kullanımı yazımızda React ile map döngüsünün kullanımını inceliyoruz.
Örneklerle JavaScript for Döngüsü yazımızda for döngüsünü inceliyoruz.

Sorularınız için yorumları kullanabilirsiniz.