` syntax'i](/reference/react/Fragment#rendering-a-list-of-fragments) kullanmalısınız.
```js
import { Fragment } from 'react';
@@ -393,46 +395,46 @@ const listItems = people.map(person =>
);
```
-Fragments disappear from the DOM, so this will produce a flat list of ``, `
`, `
`, `
`, and so on.
+Fragmentler DOM'dan kaybolur, bu nedenle geriye sadece `
`, `
`, `
`, `
` gibi elementler kalacaktır.
-### Where to get your `key` {/*where-to-get-your-key*/}
+### `anahtar` nereden gelir {/*where-to-get-your-key*/}
-Different sources of data provide different sources of keys:
+Farklı veri kaynakları, farklı anahtar kaynakları sağlar:
-* **Data from a database:** If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.
-* **Locally generated data:** If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) or a package like [`uuid`](https://www.npmjs.com/package/uuid) when creating items.
+* **Veritabanından gelen veri:** Eğer veriniz bir veritabanından geliyorsa, doğasından ötürü zaten benzersiz olan veritabanı anahtarları/ID'leri kullanılabilir.
+* **Yerel olarak oluşturulmuş veriler:** Eğer veriniz yerel olarak oluşturuluyor ve saklanıyorsa (örneğin not alma aplikasyonundaki notlar), sıralı olarak artan numaralar [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) ya da [`uuid`](https://www.npmjs.com/package/uuid) gibi bir paket kullanabilirsiniz.
-### Rules of keys {/*rules-of-keys*/}
+### Anahtarların kuralları {/*rules-of-keys*/}
-* **Keys must be unique among siblings.** However, it’s okay to use the same keys for JSX nodes in _different_ arrays.
-* **Keys must not change** or that defeats their purpose! Don't generate them while rendering.
+* **Anahtarlar kardeşler arasında benzersiz olmalıdır.** Ancak, _farklı_ dizilerdeki JSX node'ları için aynı anahtarları kullanmakta bir sakınca yoktur.
+* **Anahtarlar değişmemelidir.** yoksa bu anahtarların bütün amacını bozar! Anahtarları render etme sırasında üretmeyiniz.
-### Why does React need keys? {/*why-does-react-need-keys*/}
+### React neden anahtarlara ihtiyaç duyar? {/*why-does-react-need-keys*/}
-Imagine that files on your desktop didn't have names. Instead, you'd refer to them by their order -- the first file, the second file, and so on. You could get used to it, but once you delete a file, it would get confusing. The second file would become the first file, the third file would be the second file, and so on.
+Masaüstünüzdeki dosyaların isimlerinin olmadığını düşünün. Bunun yerine, dosyalara sıralarına göre referans edersiniz -- ilk dosya, ikinci dosya gibi. Bu sisteme alışabilirsiniz ama bir dosyayı sildiğiniz zaman durum kafa karıştırıcı bir hale gelecektir. İkinci dosya birinci, üçüncü dosya ise ikinci dosya olurdu gibi.
-File names in a folder and JSX keys in an array serve a similar purpose. They let us uniquely identify an item between its siblings. A well-chosen key provides more information than the position within the array. Even if the _position_ changes due to reordering, the `key` lets React identify the item throughout its lifetime.
+Dosya isimleri de dizilerdeki JSX anahtarları gibi aynı amaca hizmet etmektedir. Anahtarlar, kardeşleri arasında bir öğeyi benzersiz bir şekilde tanımlamamıza olanak sağlar. İyi seçilmiş bir anahtar, dizi içindeki pozisyondan daha fazla bilgi sağlar. Örneğin _sıra_ yeniden sıralama nedeniyle değişse bile, `anahtar` React'in öğeyi döngü boyunca tanımasını sağlar.
-You might be tempted to use an item's index in the array as its key. In fact, that's what React will use if you don't specify a `key` at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.
+Anahtar olarak dizideki bir öğenin indeksini kullanmak isteyebilirsiniz. Aslında, hiç bir `key` (`anahtar`) belirtmezseniz React'in kullanacağı anahtar bu olacaktır. Ancak, bir öğe eklenirse, silinirse veya dizi yeniden sıralanırsa, öğeleri oluşturma sıranız zaman içinde değişecektir. Bir anahtar olarak indeksi kullanmak, genellikle gizli ve kafa karıştırıcı hatalara yol açar.
-Similarly, do not generate keys on the fly, e.g. with `key={Math.random()}`. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data.
+Benzer şekilde, anahtarları o anda oluşturmayın, örneğin `key={Math.random()}` ile oluşturulan anahtarlar. Bu, anahtarların render etmeler arasında eşleşmemesine neden olarak tüm bileşenlerinizin ve DOM'un her seferinde yeniden oluşturulmasına yol açar. Bu sadece yavaş olmakla kalmaz, aynı zamanda liste öğeleri içindeki herhangi bir kullanıcı girdisini de kaybeder. Bunun yerine, verilere dayalı sabit bir ID kullanılmalıdır.
-Note that your components won't receive `key` as a prop. It's only used as a hint by React itself. If your component needs an ID, you have to pass it as a separate prop: ``.
+Bileşenlerinizin prop olarak `key` (`anahtar`) almayacağını unutmayın. Yalnıcaz React'in kendisi tarafından bir işaret olarak kullanılırlar. Eğer bileşeninizin bir ID'ye ihtiyacı varsa, ID'yi ayrı bir prop olarak şu şekilde kullanabilirsiniz: ``.
-On this page you learned:
+Bu sayfada şunları öğrendiniz:
-* How to move data out of components and into data structures like arrays and objects.
-* How to generate sets of similar components with JavaScript's `map()`.
-* How to create arrays of filtered items with JavaScript's `filter()`.
-* Why and how to set `key` on each component in a collection so React can keep track of each of them even if their position or data changes.
+* Verileri bileşenlerin dışına, diziler ve objeler gibi veri yapılarına taşıma.
+* JavaScript'in `map()` metodu ile benzer bileşen setleri oluşturma.
+* JavaScript'in `filter()` metodu ile filterenmiş öğe dizileri oluşturma.
+* React'in, konumları ya da verileri değişse bile her bir koleksiyondaki her bileşeni takip edebilmesi için `anahtar` neden ve nasıl kullanılır.
@@ -440,11 +442,11 @@ On this page you learned:
-#### Splitting a list in two {/*splitting-a-list-in-two*/}
+#### Bir listeyi ikiye bölme {/*splitting-a-list-in-two*/}
-This example shows a list of all people.
+Bu örnek tüm insanların bir listesini göstermektedir.
-Change it to show two separate lists one after another: **Chemists** and **Everyone Else.** Like previously, you can determine whether a person is a chemist by checking if `person.profession === 'chemist'`.
+Örneği birbiri ardına iki ayrı liste gösterecek şekilde değiştirin: **Chemists** ve **Everyone Else.** Daha önce yaptığımız gibi, bir insanın "chemist" olup olmadığını `person.profession === 'chemist'` ifadesi ile tespit edebilirsiniz.
@@ -535,7 +537,7 @@ img { width: 100px; height: 100px; border-radius: 50%; }
-You could use `filter()` twice, creating two separate arrays, and then `map` over both of them:
+`filter()` metodunu iki defa kullanıp iki farklı dizi oluşturabilir ardından `map` metodunu kullanabilirsiniz:
@@ -648,9 +650,9 @@ img { width: 100px; height: 100px; border-radius: 50%; }
-In this solution, the `map` calls are placed directly inline into the parent `` elements, but you could introduce variables for them if you find that more readable.
+Bu çözümde, `map` metodu doğrudan üst `` elementinin satır içine yerleştirilebilir, ancak daha okunabilir olmasını istiyorsanız yeni değişkenler kullanabilirsiniz.
-There is still a bit duplication between the rendered lists. You can go further and extract the repetitive parts into a `` component:
+Render edilmiş listeler arasında hala bazı tekrarlamalar mevcut. Çözümü biraz daha ileri götürmek isterseniz tekrar eden bölümleri yeni bir `` bileşenine aktarabilirsiniz:
@@ -762,9 +764,9 @@ img { width: 100px; height: 100px; border-radius: 50%; }
-A very attentive reader might notice that with two `filter` calls, we check each person's profession twice. Checking a property is very fast, so in this example it's fine. If your logic was more expensive than that, you could replace the `filter` calls with a loop that manually constructs the arrays and checks each person once.
+Çok dikkatli bir okuyucu, iki defa `filter` metodunu kullanmak her kişinin mesleğinin iki defa kontrol edilmesine sebep olacağını görmüştür. Bir özelliği kontrol etmek çok hızlıdır, bu nedenle bu örnek bir sorun yaratmayacaktır. Ancak kullandığınız mantığın hesaplanması pahalıysa `filter` metodunu, dizileri manuel olarak oluşturan ve her kişiyi bir kez kontrol eden bir döngü ile değiştirebilirsiniz.
-In fact, if `people` never change, you could move this code out of your component. From React's perspective, all that matters is that you give it an array of JSX nodes in the end. It doesn't care how you produce that array:
+Aslında, eğer `people` hiç değişmiyorsa, bu kodu bileşeninizden çıkarabilirsiniz. React'in perspektifine göre, önemli olan tek şey sonunda React'e bir dizi JSX node'u vermenizdir. React diziyi nasıl ürettiğiniz ile ilgilenmez:
@@ -882,13 +884,13 @@ img { width: 100px; height: 100px; border-radius: 50%; }
-#### Nested lists in one component {/*nested-lists-in-one-component*/}
+#### Bir bileşende iç içe geçmiş listeler {/*nested-lists-in-one-component*/}
-Make a list of recipes from this array! For each recipe in the array, display its name as an `` and list its ingredients in a ``.
+Bu diziden bir tarif listesi yapın! Dizideki her bir tarif için tarifin ismini `` olarak gösterin ve içindekiler kısmını `` ile gösterin.
-This will require nesting two different `map` calls.
+Bunu yapmak için iki `map` metodunu iç içe kullanmalısınız.
@@ -926,7 +928,7 @@ export const recipes = [{
-Here is one way you could go about it:
+Problemi çözmenin bir yolu şu şekildeydi:
@@ -972,13 +974,13 @@ export const recipes = [{
-Each of the `recipes` already includes an `id` field, so that's what the outer loop uses for its `key`. There is no ID you could use to loop over ingredients. However, it's reasonable to assume that the same ingredient won't be listed twice within the same recipe, so its name can serve as a `key`. Alternatively, you could change the data structure to add IDs, or use index as a `key` (with the caveat that you can't safely reorder ingredients).
+Her bir `recipes` zaten bir `id` değerine sahip, bu yüzden dışardaki döngü bu değeri `key` (`anahtar`) olarak kullanmakta. İçindekiler kısmındaki döngü için kullanabiliceğimiz bir ID değerine sahip değiliz. Ancak, bir malzeme aynı tarif içinde iki defa bulunmayacağından dolayı, malzemenin ismini `anahtar` olarak kullanmakta bir sakınca yoktur. Alternatif olarak, veri yapısını ID'ler olacak şekilde değiştirebilir ya da indeksi `key` (`anahtar`) olarak kullanabiliriz (malzemeleri güvenli bir şekilde yeniden sıralayamayacağımız uyarısıyla).
-#### Extracting a list item component {/*extracting-a-list-item-component*/}
+#### Bir liste öğesi bileşeni çıkarma {/*extracting-a-list-item-component*/}
-This `RecipeList` component contains two nested `map` calls. To simplify it, extract a `Recipe` component from it which will accept `id`, `name`, and `ingredients` props. Where do you place the outer `key` and why?
+`RecipeList` bileşeni iç içe iki defa `map` metodunu kullanmaktadır. Bu işlemi basitleştirmek için, `id`, `name`, ve `ingredients` prop'larını alacak olan yeni bir `Recipe` bileşeni oluşturun. Dıştaki `anahtar`'ı nereye ve neden yerleştirirsiniz?
@@ -1026,7 +1028,7 @@ export const recipes = [{
-You can copy-paste the JSX from the outer `map` into a new `Recipe` component and return that JSX. Then you can change `recipe.name` to `name`, `recipe.id` to `id`, and so on, and pass them as props to the `Recipe`:
+Dıştaki `map` metodundaki JSX'i yeni bir `Recipe` bileşenine kopyalayıp yapıştırabilir ve bu JSX'i geri döndürebilirsiniz. Daha sonra `recipe.name`'i `name`'e, `recipe.id`'yi `id`'ye dönüştürüp prop olarak `Recipe` bileşenine aktarabilirsiniz:
@@ -1078,15 +1080,15 @@ export const recipes = [{
-Here, `` is a syntax shortcut saying "pass all properties of the `recipe` object as props to the `Recipe` component". You could also write each prop explicitly: ``.
+Burada, `` syntax'ı `recipe` objesinin tüm özelliklerini `Recipe` bileşenine prop olarak aktarmanın kısa bir yoludur. Ayrıca her bir prop'u açıkça şu şekilde yazabilirsiniz: ``.
-**Note that the `key` is specified on the `` itself rather than on the root `` returned from `Recipe`.** This is because this `key` is needed directly within the context of the surrounding array. Previously, you had an array of `
`s so each of them needed a `key`, but now you have an array of `
`s. In other words, when you extract a component, don't forget to leave the `key` outside the JSX you copy and paste.
+**`key`'in (`anahtar`) `Recipe`'den döndürülen root `` yerine `
` üzerinde kullanıldığına dikkat edin.** Bunun nedeni, `anahtar`'ın doğrudan çevreleyen dizi bağlamında gerekli olmasıdır. Önceden, bir `` diziniz vardı, dolayısıyla her birinin bir ``anahtar`'a ihtiyacı vardı. Ancak artık bir `
` diziniz var. Diğer bir deyişle, yeni bir bileşen çıkarttığınız zaman, `anahtar`'ı kopyalayıp yapıştırdığınız JSX'in dışında bırakmayı unutmayın.
-#### List with a separator {/*list-with-a-separator*/}
+#### Ayraç içeren liste {/*list-with-a-separator*/}
-This example renders a famous haiku by Katsushika Hokusai, with each line wrapped in a `` tag. Your job is to insert an `
` separator between each paragraph. Your resulting structure should look like this:
+Bu örnek, Katsushika Hokusai'nin her satırı `` elementi içinde olacak şekilde yazılmış ünlü bir haiku'sunu göstermektedir. Bizim görevimiz, her paragrafın arasına gelecek bir `
` ayırıcı elementi eklemektir. Ortaya şöyle bir yapı çıkmalıdır:
```js
@@ -1098,7 +1100,7 @@ This example renders a famous haiku by Katsushika Hokusai, with each line wrappe
```
-A haiku only contains three lines, but your solution should work with any number of lines. Note that `
` elements only appear *between* the `` elements, not in the beginning or the end!
+Bir haiku yalnızca üç satır içerir ancak yapacağınız çözüm herhangi bir sayıda satırla da çalışmalıdır. `
` elementinin `` elementinin yalnızca *arasında* olduğuna, başında ya da sonunda olmadığına dikkat edin!
@@ -1141,17 +1143,17 @@ hr {
-(This is a rare case where index as a key is acceptable because a poem's lines will never reorder.)
+(Burası indeksi anahtar olarak kullanmakta sakınca olmadağı nadir durumlardan biridir çünkü şiirin satırlarının yerleri hiçbir zaman değişmeyecektir.)
-You'll either need to convert `map` to a manual loop, or use a fragment.
+Burada `map` metodu yerine manuel bir döngü kullanmanız ya da bir fragment kullanmanız gerekmektedir.
-You can write a manual loop, inserting `
` and `...
` into the output array as you go:
+Output dizisine `
` ve `...
` elementleri ekleyerek manuel bir döngü yazabilirsiniz:
@@ -1167,7 +1169,7 @@ const poem = {
export default function Poem() {
let output = [];
- // Fill the output array
+ // Output dizisine ekleyin
poem.lines.forEach((line, i) => {
output.push(
@@ -1178,7 +1180,7 @@ export default function Poem() {
);
});
- // Remove the first
+ // İlk
elementi silin
output.shift();
return (
@@ -1206,9 +1208,9 @@ hr {
-Using the original line index as a `key` doesn't work anymore because each separator and paragraph are now in the same array. However, you can give each of them a distinct key using a suffix, e.g. `key={i + '-text'}`.
+Şiirin satır indeksini `key` (`anahtar`) olarak kullanmak artık işe yaramayacaktır çünkü artık her ayraç ve paragraf aynı dizide bulunmakta. Ancak, bir sonek kullanarak her birine ayrı bir anahtar verebilirsiniz, örneğin `key={i + '-text'}`.
-Alternatively, you could render a collection of fragments which contain `
` and `...
`. However, the `<>...` shorthand syntax doesn't support passing keys, so you'd have to write `` explicitly:
+Alternatif olarak, `
` ve `...
` elementlerini içeren fragmentler render edebilirsiniz. Ancak, `<>...` kısa syntax'i anahtarları prop olarak alamaz bu yüzden `` olarak kullanmanız gerekmektedir:
@@ -1254,7 +1256,7 @@ hr {
-Remember, fragments (often written as `<> `) let you group JSX nodes without adding extra ``s!
+Şunu unutmayın, fragmentler (`<> ` şeklinde yazılır) fazladan `
`ler kullanmadan JSX node'larını gruplamanıza izin verirler.