---
title: Bölüme veri ekleme ve bağlama
description: Ürün listesi bölümüne veri ekleme ve bağlama.
---

<Video src="/media/ikas-studio/basic-examples/product-list/adding-and-binding-data-to-section.mp4" autoPlay muted loop controls />

<Callout type="info" title="Geliştiriciler için">
Bölüme veri eklemek, React'te bir component'e prop tanımlamaya benzer. Bölüm dışarıdan hangi veriyi alacağını bildirir ve bu veri İçerik modunda son kullanıcı tarafından yapılandırılabilir hale gelir. Örneğin bu adımda tanımlayacağımız `productList` verisi, React'te şu şekilde ifade edilebilir:

```tsx
interface ProductListSectionProps {
  productList: ProductList;
}
```
</Callout>

## Veri ekleme

Bölüm detayına girdikten sonra seçtiğiniz bir element'in sağ kısımda açılan panelinin en üstündeki **Veri Ekle** kısmına tıklayarak veri ekleyebilirsiniz. Açılan modaldan **Ürün Listesi**'ni seçip ilerleyin.

Veri ekle modalından aşağıdaki bilgileri girerek veriyi tanımlayabilirsiniz:

- **Görünen İsim**
- **Değişken Adı**
- **Açıklama**
- **Varsayılan**
- **Grup**

## Veri bağlama

İç kısımdaki çerçeveye sağ tıklayarak **Veri Bağla** kısmından `productList` > `products` verisini seçin. Bu kısım bir liste olduğu için öncelikle bu çerçeveyi list görünümüne dönüştürecek modal açılır.

Bu modalda **List Component Name** alanını girerek listenin adını ve item'lere hangi isimlendirme ile erişebileceğinizi belirlersiniz. Örneğin **List Component Name**'i `ProductList` olarak belirlerseniz, **List Item Name** otomatik olarak `productListItem` şeklinde isimlendirilir. Liste altındaki item verilerine tekli ürün olarak `productListItem` üzerinden erişirsiniz.

**Kaydet**'e bastıktan sonra bu liste, **Katmanlar** kısmında `ProductList` ismiyle ve liste olduğunu belirten yeşil bir görünümle yer alır.

<Callout type="info" title="Listeler">
Liste hakkında daha detaylı bilgi için [Listeler](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/list) sayfasını inceleyebilirsiniz.
</Callout>

<Callout type="info" title="Geliştiriciler için">
Bir çerçeveye liste verisi bağlamak, JavaScript'teki `Array.map()` işlemine karşılık gelir. Liste içindeki her bir item için çerçevenin içeriği tekrarlanır ve her iterasyonda ilgili item verisine `productListItem` üzerinden erişilir. Çift tıklayarak girdiğiniz item detayı, `map` callback'inin **içine** karşılık gelir:

```tsx
productList.products.map((productListItem) => {
  // item detayı bu blokun içine karşılık gelir
  return <ProductListItem product={productListItem} />;
});
```
</Callout>

## Item detayına erişim

**Katmanlar** kısmında liste görünümüne geçen element'e çift tıklayarak item'a erişebilirsiniz. Bu, section içerisinde bir listin içindeki item'da olduğunuz anlamına gelir. Artık `ProductList` içerisindeki item üzerinden ürün verilerine ulaşabilirsiniz.

## Ürün adını bağlama

Sol kısımdaki ilk element'i seçin ve yine sol kısımda bulunan **Elementler** kısmından bir **Yazı** element'i ekleyin. Yazı element'ine sağ tıklayarak **Veri Bağla** kısmından `productListItem` > `name` verisini seçerek yazı elementine ürün adını bağlamış olursunuz.

Ekranda, veri eklerken varsayılan olarak belirlenen liste ayarlarına göre ürün isimleri 4'lü grid yapısında görüntülenecektir.