React uygulamalarında listelerle çalışmak oldukça yaygındır. Bu listeler genellikle kullanıcı etkileşimlerine bağlı olarak dinamik şekilde güncellenir. Bu makalede, React'te basit bir dinamik listeyi nasıl oluşturup güncelleyebileceğinizi adım adım örneklerle inceleyeceğiz.

1. State ile Listeyi Yönetmek

İlk olarak, listeyi bir useState hook'u ile yönetmeliyiz. Bu sayede listenin güncellenen hallerini React bileşeni içinde saklayabiliriz.

Örnek Kod

import React, { useState } from 'react';

function DinamikListe() {
  const [items, setItems] = useState(['React', 'Vue', 'Angular']);

  return (
    <div>
      <h3>Popüler JS Frameworkleri</h3>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default DinamikListe;

Burada, başlangıçta 3 framework ismi bulunan bir liste oluşturduk ve map fonksiyonu ile liste öğelerini görüntülüyoruz.

2. Listeye Eleman Ekleme

Kullanıcının yeni öğe ekleyebilmesi için bir buton ve input alanı ekleyelim. Yeni öğe eklendiğinde setItems ile liste güncellenecek.

Geliştirilmiş Kod

import React, { useState } from 'react';

function DinamikListe() {
  const [items, setItems] = useState(['React', 'Vue', 'Angular']);
  const [inputValue, setInputValue] = useState('');

  const handleAddItem = () => {
    if (inputValue.trim() !== '') {
      setItems([...items, inputValue.trim()]);
      setInputValue('');
    }
  };

  return (
    <div>
      <h3>Popüler JS Frameworkleri</h3>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Yeni framework ekle"
      />
      <button onClick={handleAddItem}>Ekle</button>
    </div>
  );
}

export default DinamikListe;

Artık kullanıcı metin kutusuna bir isim yazıp Ekle butonuna bastığında liste güncellenecek ve yeni öğe görüntülenecektir.

3. Liste Öğesini Silme

Kullanıcıların liste öğelerini silmesi yaygın bir ihtiyaçtır. Her öğenin yanına bir silme butonu ekleyip ona tıklanınca o öğeyi listeden çıkaracağız.

Silme Özelliği Eklenen Kod

import React, { useState } from 'react';

function DinamikListe() {
  const [items, setItems] = useState(['React', 'Vue', 'Angular']);
  const [inputValue, setInputValue] = useState('');

  const handleAddItem = () => {
    if (inputValue.trim() !== '') {
      setItems([...items, inputValue.trim()]);
      setInputValue('');
    }
  };

  const handleRemoveItem = (indexToRemove) => {
    setItems(items.filter((_, index) => index !== indexToRemove));
  };

  return (
    <div>
      <h3>Popüler JS Frameworkleri</h3>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item}
            <button
              style={{ marginLeft: '10px' }}
              onClick={() => handleRemoveItem(index)}
            >
              Sil
            </button>
          </li>
        ))}
      </ul>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Yeni framework ekle"
      />
      <button onClick={handleAddItem}>Ekle</button>
    </div>
  );
}

export default DinamikListe;

Her liste öğesinin yanındaki "Sil" butonuna tıklayarak, ilgili öğeyi listeden kaldırabilirsiniz.

Sonuç

Bu makalede React'te dinamik listeyi oluşturma, listeye yeni eleman ekleme ve liste elemanlarını silme işlemlerini öğrendiniz. useState hook'u ile listeyi yönetmek ve kullanıcı etkileşimlerine göre listeyi güncellemek oldukça pratiktir. Bu temellerden yola çıkarak daha karmaşık liste uygulamaları geliştirebilirsiniz.