---
title: Bileşene veri ekleme ve bağlama
description: Ürün kartı bileşenine veri ekleme ve bağlama.
---
Bileşene veri eklemek, React'te bir component'e prop tanımlamaya karşılık gelir. Burada `product` verisi tanımlayarak bileşenin dışarıdan bir ürün verisi beklediğini bildiriyorsunuz:
```tsx
interface ProductCardProps {
product: Product;
}
```
Bileşeni kullandığınız yerde bu prop'a değer bağlamak, JSX'te `` yazmakla aynı mantıktadır.
## Bileşene veri ekleme
Ürün kartı bileşenine çift tıklayarak detayına gidin. **Katmanlar** kısmından bileşen içindeki herhangi bir element'i seçin ve sağ kısımdaki panelden **Veri Ekle** kısmına tıklayın. Açılan modaldan `Product` veri tipini seçerek ilerleyin.
Veri ekle modalından aşağıdaki bilgileri düzenleyebilirsiniz:
- **Görünen İsim**
- **Değişken Adı**
- **Açıklama**
- **Varsayılan**
- **Grup**
Bilgileri girdikten sonra **Kaydet**'e basın. Artık bileşenin kendine ait bir `product` verisi tanımlanmış olur.
## Bileşen içindeki elemente veri bağlama
Bileşen detayındayken yazı element'ine sağ tıklayarak **Veri Bağla** kısmından `product` > `name` verisini seçin. Bu şekilde yazı elementine ürün adını bağlamış olursunuz.
Oluşturduğunuz bu bileşeni artık dilediğiniz bölümde kullanabilirsiniz. Yapmanız gereken tek işlem, kullandığınız yerde bileşene bir `product` verisi bağlamak olacaktır.
## Listeden gelen veriyi bileşene bağlama
`ProductList` item detayına geri dönün ve eklediğiniz ürün kartı bileşenini seçin. Sağ kısımdaki **Data** sekmesi altından `product` verisine listeden gelen `productListItem` değerini bağlayın.
`productListItem` değeri zaten `Product` tipinde olduğu için bileşeniniz bu veriye bağlı olarak çalışmaya başlayacaktır. Liste içindeki her bir item, kendi ürün verisini otomatik olarak bileşene aktaracaktır.