React.js’de etkileşimli bir döngü oluşturmak için, state ve map() yöntemini kullanabilirsiniz. state, uygulamanızın durumunu ve map() yöntemi, bir dizi üzerinde döngü yapmanızı sağlar.
Aşağıdaki örnek, bir dizi öğeyi listeleyen bir bileşen oluşturur ve her öğe için bir düğme ekler:
import React, { useState } from “react”;
function MyComponent() {
const [items, setItems] = useState(["item1", "item2", "item3"]);
const handleClick = (index) => {
// Yeni bir dizi oluşturun ve tıklanan öğeyi çıkarın
const newItems = [...items];
newItems.splice(index, 1);
// State'i güncelleyin
setItems(newItems);
};
return (
<div>
{items.map((item, index) => (
<div key={index}>
<p>{item}</p>
<button onClick={() => handleClick(index)}>Sil</button>
</div>
))}
</div>
);
}
Yukarıdaki örnekte, useState() yöntemi ile items adlı bir dizi oluşturuyoruz ve üç öğe ekliyoruz. Daha sonra, döngü yapmak için map() yöntemini kullanıyoruz. Her öğe için bir paragraf ve bir düğme oluşturuyoruz. Düğmeye tıklandığında, handleClick() fonksiyonu çağrılır ve tıklanan öğe listeden kaldırılır. Son olarak, güncellenmiş öğeler dizisini setItems() yöntemiyle state’e geri yükleriz.
Bu şekilde, etkileşimli bir döngü oluşturabilir ve kullanıcı etkileşimleri ile birlikte dinamik olarak bileşenleri güncelleyebilirsiniz.