Bugünkü yazımızda React Listeler konusuna bakacağız. React uygulamalarında listeleri render etmek oldukça önemlidir. Bu işlemi gerçekleştirmek için en sık kullanılan yöntemlerden biri, map fonksiyonudur. map fonksiyonu, bir diziyi dolaşarak her bir öğeyi işlememize ve yeni bir dizi oluşturmamıza olanak sağlar.
1. String Dizisini Render Etme
Öncelikle, basit bir string dizisi oluşturalım ve bu diziyi map fonksiyonu ile render edelim. Aynı zamanda map fonksiyonunu hem JSX içinde hem de JSX dışında kullanarak iki kullanımı da görelim.
ListExample.js (JSX içinde map kullanımı)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const names = ["Alice", "Bob", "Charlie", "David"]; const ListExample = () => { return ( <div> <h2>Liste Örneği (JSX İçinde)</h2> <ul> {names.map((name, index) => ( <li key={index}>{name}</li> ))} </ul> </div> ); }; export default ListExample; |
ListOutsideExample.js (JSX dışında map kullanımı)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const names = ["Alice", "Bob", "Charlie", "David"]; const ListOutsideExample = () => { const listItems = names.map((name, index) => <li key={index}>{name}</li>); return ( <div> <h2>Liste Örneği (JSX Dışında)</h2> <ul>{listItems}</ul> </div> ); }; export default ListOutsideExample; |
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import ListExample from "./componets/ListExample"; import ListOutsideExample from "./componets/ListOutsideExample"; const App = () => { return ( <div> <ListExample /> <ListOutsideExample /> </div> ); }; export default App; |
Bu örneğimizde, React componentlerini kullanarak bir liste örneği oluşturmayı öğrenmiş oluyoruz.
⇒ İlk olarak, names adında bir string dizisi tanımlıyoruz.
⇒ ListExample adında bir component oluşturuyoruz ve bu component JSX içinde bir liste oluşturuyor. names dizisini map fonksiyonuyla dolaşıyoruz ve her bir öğe için <li> elemanı oluşturuyoruz. Her elemanın key (bunu neden kullandığımızı yazının sonunda anlatacağım) prop’u, öğenin index değeri olarak atıyoruz. Son olarak, <ul> elemanı ile birlikte bu oluşturulan öğeleri ekran üzerinde listeliyoruz.
⇒ ListOutsideExample adında bir başka component daha oluşturuyoruz. Bu component JSX dışında bir dizi oluşturuyor ve aynı şekilde names dizisini map fonksiyonuyla dolaşarak öğeler oluşturacak. Bu öğeleri daha sonra JSX içinde kullanılmak üzere listItems adlı bir değişkene atıyoruz. Son olarak, <ul> elemanı ile birlikte listItems değişkenini kullanarak öğeleri ekrana yazdırıyoruz.
⇒ Son olarak, App componenti oluşturuyoruz ve içinde ListExample ve ListOutsideExample componentleri kullanıyoruz. Bu componentleri , <div> elemanı içinde kullanarak sırasıyla listeleri ekrana render ediyoruz.
Çıktı:
2. Objelerden Oluşan Bir Diziyi Render Etme
Şimdi, objelerden oluşan bir dizi oluşturalım ve bu diziyi JSX dışında kullanarak ekrana yazdıralım.
map fonksiyonu ile objeleri dolaşarak JSX içinde değişiklikler yapabilirsiniz ancak burada sadece JSX dışında kullanımını göstereceğim. Böylece JSX alanımız daha temiz ve daha okunaklı olmuş olacak.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
const users = [ { id: 1, name: "Alice", age: 25 }, { id: 2, name: "Bob", age: 30 }, { id: 3, name: "Charlie", age: 22 }, ]; const ListUsers = () => { const userItems = users.map((user) => ( <div key={user.id}> <p>Name: {user.name}</p> <p>Age: {user.age}</p> <hr /> </div> )); return ( <div> <h2>Kullanıcı Listesi</h2> {userItems} </div> ); }; export default const App = () => { return ( <div> <ListUsers /> </div> ); } |
⇒ users adında bir dizi tanımlıyoruz. Bu dizi, kullanıcıların bilgilerini içerir. Her bir kullanıcı bir obje olarak temsil edilir ve id, name ve age özelliklerine sahiptir.
⇒ ListUsers adında bir component tanımlıyoruz. Bu component , kullanıcı listesini görüntülemek ve her bir kullanıcı için bir öğe oluşturmak için kullanılır.
⇒ users.map yöntemini kullanarak, users dizisindeki her bir kullanıcı için bir öğe oluşturuyoruz. Bu öğeler, kullanıcının adını ve yaşını gösteren HTML içeriğiyle birlikte bir div içinde yer alır. Her öğenin benzersiz bir key değeri vardır.
⇒ ListUsers componenti , kullanıcı öğelerini içeren bir div içindeki bir başlık (h2) ve userItems değişkenini görüntüler.
⇒ Ana bileşen olan App fonksiyonu, ListUsers componentini içeren bir div döndürür.
Bu şekilde, ListUsers componenti, her bir kullanıcı için bir öğe oluşturur ve ana component olan App componenti de, ListUsers componentini kullanarak kullanıcı listesini ekranda görüntüler.
Çıktı:
3. İç İçe Objelerden Oluşan Bir Diziyi Render Etme
React listeler konusunda son olarak, iç içe objelerden oluşan bir liste oluşturalım ve bu listeyi ekrana yazdıralım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
const nestedList = [ { id: 1, name: "Alice", hobbies: ["Reading", "Painting"], }, { id: 2, name: "Bob", hobbies: ["Playing Guitar", "Hiking"], }, { id: 3, name: "Charlie", hobbies: ["Cooking", "Photography"], }, ]; const NestedListExample = () => { return ( <div> <h2>İç İçe Obje Listesi</h2> {nestedList.map((item) => ( <div key={item.id}> <p>Name: {item.name}</p> <p>Hobbies:</p> <ul> {item.hobbies.map((hobby, index) => ( <li key={index}>{hobby}</li> ))} </ul> <hr /> </div> ))} </div> ); }; export default const App = () => { return ( <div> <NestedListExample /> </div> ); } |
Bu örnek ile, iç içe geçmiş bir nesne listesini React kullanarak ekranda görüntülemek için bir component oluşturuyoruz.
⇒ nestedList adında bir dizi tanımlıyoruz. Bu dizi, iç içe geçmiş nesneleri içerir. Her bir nesne, bir kimlik (id), bir isim (name) ve hobiler (hobbies) adında bir dizi içerir.
⇒ NestedListExample adında bir component tanımlıyoruz. Bu componenti , iç içe geçmiş nesne listesini görüntülemek için kullanıyoruz.
⇒ nestedList.map yöntemini kullanarak, nestedList dizisindeki her bir öğe için bir öğe oluşturuyoruz. Her bir öğeyi, item olarak adlandırılan bir değişkene atıyoruz.
⇒ Her bir öğenin içinde, item nesnesinin id, name ve hobbies özelliklerini kullanarak HTML içeriğini oluşturuyoruz. İsim ve hobileri gösteren <p> ve <ul> etiketleri kullanıyoruz.
⇒ Hobilerin listesini oluşturmak için item.hobbies.map yöntemini kullanıyoruz. Her bir hobiyi bir <li> öğesi olarak liste içinde gösteriyoruz.
⇒ Her bir öğenin sonunda <hr /> etiketi kullanarak bir yatay çizgi ekliyoruz.
⇒ NestedListExample componenti, iç içe geçmiş nesne listesini içeren bir div içinde bir başlık (h2) ve oluşturduğumuz öğeleri görüntüler.
⇒ Ana component olan App fonksiyonu, NestedListExample componentini içeren bir div döndürür ve ekrana yazdırır.
Çıktı:
Bu şekilde, NestedListExample componenti, her bir iç içe geçmiş nesne için bir öğe oluşturabilir ve ana component olan App componentinde, NestedListExample componentini kullanarak iç içe geçmiş nesne listesini ekranda görüntüleyebiliriz.
Umarım “React Listeler ve Map Kullanımı” başlıklı yazım sizin için faydalı olmuştur. Listeleri render etme ile ilgili sorunuz olursa yorum kısmından sormayı unutmayın.
Şu yazılar da ilginizi çekebilir.
React Component Nedir? React Component Kullanımı
Happy Coding!
