ReactJS Ders 8 | Veri Haritalama (Mapping Data)

Verileri haritalamak ve listeler oluşturmak için döngülerle örnekler yapalım.

Örnek 1:

import React from 'react';

const App = () => {
  const numbers = [1, 2, 3, 4, 5];

  return (
    <div>
      <h1>Sayı Listesi</h1>
      <ul>
        {numbers.map((number) => (
          <li key={number}>{number}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Bu örnekte, numbers dizisi içindeki her bir sayıyı liste öğelerine dönüştürerek bir sayı listesi oluşturuyoruz.

Örnek 2:

import React from 'react';

const App = () => {
  const fruits = ['Apple', 'Banana', 'Orange'];

  return (
    <div>
      <h1>Meyve Listesi</h1>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Bu örnekte, fruits dizisi içindeki her bir meyveyi liste öğelerine dönüştürerek bir meyve listesi oluşturuyoruz. map fonksiyonunun ikinci parametresi olan index, her bir liste öğesi için benzersiz bir key değeri oluşturmak için kullanılıyor.

Örnek 3:

import React from 'react';

const App = () => {
  const colors = ['Red', 'Green', 'Blue'];

  return (
    <div>
      <h1>Renk Listesi</h1>
      <ul>
        {colors.map((color) => (
          <li key={color} style={{ color }}>{color}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Bu örnekte, colors dizisi içindeki her bir renge ait liste öğesini oluşturuyoruz. Her liste öğesi için key özelliği olarak renk adını kullanıyoruz ve stil olarak color özelliğini renk adına uyguluyoruz.

Bu örneklerde görüldüğü gibi, döngülerle verileri haritalamak, liste oluşturmak ve her bir öğeye özgü işlemler yapmak oldukça kolaydır. React‘in gücünü kullanarak veri tabanlı bileşenler oluşturabilir ve dinamik içerikleri render edebilirsiniz.