Diziden bileşen

Bir veri dizisinden özel bileşenler üretmeyi öğrenirsin.

Diziden bileşen

map içinde sadece JSX etiketi değil, kendi bileşenini de çağırabilirsin. Böylece her öğe zengin bir kart, satır veya hücre olur.

Örnek: {items.map(i => <Product item={i} />)}. Burada Product senin bileşenin; veriyi item prop'uyla alır.

Bileşen adı büyük harfle başladığı için React onu etiket değil bileşen sayar.

Props ile veri akışı

Listeyi bir alt bileşene böldüğünde, veriyi prop olarak geçersin. Üst bileşen map'i çağırır; alt bileşen tek bir öğeyi çizer.

Bu ayırma, kodun okunmasını kolaylaştırır ve alt bileşeni başka yerlerde yeniden kullanmana izin verir. Her alt bileşen tek bir sorumluluk taşır.

key her zaman en dıştaki çağrıya yazılır: <Product key={i.id} item={i} />.

Uygulama ProductList bileşeni

Aşağıdaki iskeleti tamamla. ProductList bileşeni yaz; items dizisinde her öğenin id ve name alanı var. .map() ile her öğeyi <li key={item.id}><Product item={item} /></li> yap. Dışa aktar.

Örnek çözümü göster

function ProductList() {
  const items = [{ id: 1, name: "Kalem" }, { id: 2, name: "Defter" }];
  return <ul>{items.map(item => <li key={item.id}><Product item={item} /></li>)}</ul>;
}

export default ProductList;

Kendini test et

Aşağıdakilerden hangisi bileşen olarak çağrılır?
```
Component names always start with a capital letter.
```
- <div>
- <li>
- <product>
- <Product>
Cevabı göster

<Product> — Büyük harfle başladığı için bileşen sayılır.

Diziden bileşen: eksik parçayı tamamla

{items.map(item => <Product item={____} />)}

Cevabı göster

{items.map(item => <Product item={item} />)}

Diziden bileşen: kavramları eşleştir

Bileşen adı

Büyük harf
Prop adı

Küçük harf
children

İçerik
map

Döngü kurar

Sıradaki ders: Filtreleme ve sıralama

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler