Skip to content

Translate Lists and Keys #94

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 11, 2019
Merged

Translate Lists and Keys #94

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7c7a3e8
Translate Lists and Keys
GasimGasimzada Aug 21, 2019
c05c467
Fix example translation
GasimGasimzada Aug 21, 2019
469bec7
Fix Lists and Keys after self-review
GasimGasimzada Aug 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 47 additions & 47 deletions content/docs/lists-and-keys.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
---
id: lists-and-keys
title: Lists and Keys
title: Siyahı və Açarlar
permalink: docs/lists-and-keys.html
prev: conditional-rendering.html
next: forms.html
---

First, let's review how you transform lists in JavaScript.
Gəlin JavaScript-də siyahıları çevirməyi nəzərdən keçirək.

Given the code below, we use the [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function to take an array of `numbers` and double their values. We assign the new array returned by `map()` to the variable `doubled` and log it:
Göstərilən kodda [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) funksiyasından istifadə edərək rəqəmlər (`numbers`) massivinində olan dəyərləri iki dəfə artırırıq. `map()`-dən qaytarılan yeni massivi `doubled` dəyişəninə təyin edib bu massivi çap edirik:

```javascript{2}
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
```

This code logs `[2, 4, 6, 8, 10]` to the console.
Bu kod konsola `[2, 4, 6, 8, 10]` çap edir.

In React, transforming arrays into lists of [elements](/docs/rendering-elements.html) is nearly identical.
React-də, massivləri [elementlər](/docs/rendering-elements.html) siyahısına çevirmək eyni formada icra olunur.

### Rendering Multiple Components {#rendering-multiple-components}
### Bir Neçə Komponentin Render Edilməsi {#rendering-multiple-components}

You can build collections of elements and [include them in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) using curly braces `{}`.
Siz elementlər kolleksiyaları yaradıb fiqur mötərizəsindən istifadə edərək [JSX-ə daxil edə bilərsiniz](/docs/introducing-jsx.html#embedding-expressions-in-jsx).

Below, we loop through the `numbers` array using the JavaScript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function. We return a `<li>` element for each item. Finally, we assign the resulting array of elements to `listItems`:
Aşağıdaki kodda, [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) funksiyasından istifadə edərək `numbers` massivindən keçirik. Biz massivin hər bəndi üçün `<li>` elementi qaytarırıq. Ən sonda, qaytarılan elementlər massivini `listItems` dəyişəninə təyin edirik:

```javascript{2-4}
const numbers = [1, 2, 3, 4, 5];
Expand All @@ -33,7 +33,7 @@ const listItems = numbers.map((number) =>
);
```

We include the entire `listItems` array inside a `<ul>` element, and [render it to the DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
`listItems` massivini `<ul>` elementinə daxil edərək siyahını [DOM-a render edirik](/docs/rendering-elements.html#rendering-an-element-into-the-dom):

```javascript{2}
ReactDOM.render(
Expand All @@ -42,15 +42,15 @@ ReactDOM.render(
);
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
[**CodePen-də sınayın**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)

This code displays a bullet list of numbers between 1 and 5.
Bu kod 1-dən 5-ə kimi rəqəmləri nöqtəli siyahıda göstərir.

### Basic List Component {#basic-list-component}
### Sadə Siyahı Komponenti {#basic-list-component}

Usually you would render lists inside a [component](/docs/components-and-props.html).
Adətən siyahılar [komponentin](/docs/components-and-props.html) daxilində render edilir.

We can refactor the previous example into a component that accepts an array of `numbers` and outputs a list of elements.
Əvvəkli nümunəni redaktə edib `numbers` massivi qəbul edən və elementlər siyahısı render edən komponentə çevirə bilərik.

```javascript{3-5,7,13}
function NumberList(props) {
Expand All @@ -70,9 +70,9 @@ ReactDOM.render(
);
```

When you run this code, you'll be given a warning that a key should be provided for list items. A "key" is a special string attribute you need to include when creating lists of elements. We'll discuss why it's important in the next section.
Bu kodu icra etdikdə, siyahı elementlərinin açarları olması haqqında xəbərdarlıq göstəriləcək. Elementlər siyahısı düzəltdikdə, xüsusi mətn atributu olan "key" (açar) atributunu daxil etməlisiniz. Gələcək bölmədə bu atributun əhəmiyyətindən danışacağıq.

Let's assign a `key` to our list items inside `numbers.map()` and fix the missing key issue.
Gəlin `numbers.map()`-in daxilində olan siyahı elementlərinə `key` atrubutunu təyin edib açar əskikliyi problemini aradan qaldıraq.

```javascript{4}
function NumberList(props) {
Expand All @@ -94,11 +94,11 @@ ReactDOM.render(
);
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
[**CodePen-də sınayın**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)

## Keys {#keys}
## Açarlar {#keys}

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:
React-də açarlardan istifadə edərək elementlərin dəyişildiyini, əlavə edildiyini və ya silindiyini müəyyənləşdirmək mümkündür. Massivdə olan elementlərə sabit identiklik verə bilmək üçün hər elementə açar verilməlidir:

```js{3}
const numbers = [1, 2, 3, 4, 5];
Expand All @@ -109,7 +109,7 @@ const listItems = numbers.map((number) =>
);
```

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:
Elementi, siyahıda olan digər elementlərdən unikal şəkildə fərqləndirən mətn seçmək açarı seçməyin ən yaxşı yoludur. Adətən, məlumatda olan ID-lər açar kimi işlənilir:

```js{2}
const todoItems = todos.map((todo) =>
Expand All @@ -119,34 +119,34 @@ const todoItems = todos.map((todo) =>
);
```

When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:
Əgər sizdə render olunan elementlər üçün sabit ID yoxdursa, son çarə kimi elementin massiv indeksini açar kimi istifadə edə bilərsiniz:

```js{2,3}
const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
// Yalnız sabit ID olmadıqda indeksdən istifadə edin
<li key={index}>
{todo.text}
</li>
);
```

We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny's article for an [in-depth explanation on the negative impacts of using an index as a key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). If you choose not to assign an explicit key to list items then React will default to using indexes as keys.
Elementlərin sırası dəyişirsə, massiv indekslərini açar kimi işlətməyi tövsiyyə etmirik. Bu performansa ziyan vura və komponent state-ində problemlər yarada bilər. [İndeksi açar kimi işlədikdə yaranan problemlər haqqında dərin izahat üçün](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) Robin Pokorninin məqaləsini oxuyun. Siyahı elementlərinə açıq formada açar təyin edilmədikdə, React massiv indekslərini açar kimi işlədəcək.

Here is an [in-depth explanation about why keys are necessary](/docs/reconciliation.html#recursing-on-children) if you're interested in learning more.
Əlavə məlumat üçün [açarların vacibliyi haqqında dərin izahatı](/docs/reconciliation.html#recursing-on-children) sənədini oxuya bilərsiniz.

### Extracting Components with Keys {#extracting-components-with-keys}
### Açarlı Komponentlərin Çıxarılması {#extracting-components-with-keys}

Keys only make sense in the context of the surrounding array.
Açarlar yalnız daxil olduğu massivin kontekstində məntiqlidir.

For example, if you [extract](/docs/components-and-props.html#extracting-components) a `ListItem` component, you should keep the key on the `<ListItem />` elements in the array rather than on the `<li>` element in the `ListItem` itself.
Məsələn, `ListItem` komponentini [çıxardıqda](/docs/components-and-props.html#extracting-components), açarları `ListItem` komponentlərində yerləşən `<li>` elementləri əvəzinə `<ListItem />` elementlərinə təyin edin.

**Example: Incorrect Key Usage**
**Nümunə: Açarın Səhv İstifadəsi**

```javascript{4,5,14,15}
function ListItem(props) {
const value = props.value;
return (
// Wrong! There is no need to specify the key here:
// Səhv! Burada açar təyin etmək lazım deyil:
<li key={value.toString()}>
{value}
</li>
Expand All @@ -156,7 +156,7 @@ function ListItem(props) {
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Wrong! The key should have been specified here:
// Səhv! Açar burada təyin edilməlidir:
<ListItem value={number} />
);
return (
Expand All @@ -173,18 +173,18 @@ ReactDOM.render(
);
```

**Example: Correct Key Usage**
**Nümunə: Açarın Düzgün İstifadəsi**

```javascript{2,3,9,10}
function ListItem(props) {
// Correct! There is no need to specify the key here:
// Düzdür! Burada açar təyin etmək lazım deyil:
return <li>{props.value}</li>;
}

function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Correct! Key should be specified inside the array.
// Düzdür! Açar, massivin daxilində təyin edilməlidir.
<ListItem key={number.toString()}
value={number} />
);
Expand All @@ -202,13 +202,13 @@ ReactDOM.render(
);
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
[**CodePen-də sınayın**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)

A good rule of thumb is that elements inside the `map()` call need keys.
Bir qayda kimi, açarları `map()` çağırışının daxilində olan elementlərə təyin edə bilərsiniz.

### Keys Must Only Be Unique Among Siblings {#keys-must-only-be-unique-among-siblings}
### Qonşular Arasında olan Açarlar Unikal Olmalıdır {#keys-must-only-be-unique-among-siblings}

Keys used within arrays should be unique among their siblings. However they don't need to be globally unique. We can use the same keys when we produce two different arrays:
Massivdə olan açarlar qonşu elementlər arasında unikal olmalıdır. Lakin, bu açarlar bütün applikasiyada unikal olmamalıdırlar. Biz iki fərqli massivdə eyni açarları istifadə edə bilərik:

```js{2,5,11,12,19,21}
function Blog(props) {
Expand Down Expand Up @@ -237,18 +237,18 @@ function Blog(props) {
}

const posts = [
{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
{id: 2, title: 'Installation', content: 'You can install React from npm.'}
{id: 1, title: 'Salam Dünya', content: 'React-i Öyrənməyə Xoş Gəlmisiniz!'},
{id: 2, title: 'Yükləmə', content: 'npm ilə React-i yükləyə bilərsiniz.'}
];
ReactDOM.render(
<Blog posts={posts} />,
document.getElementById('root')
);
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
[**CodePen-də sınayın**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)

Keys serve as a hint to React but they don't get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:
Açarlar React-də bir ipucu kimi istifadə edildiyi üçün komponentlərə göndərilmir. Əgər açar ilə göndərilən dəyər komponentdə lazımdırsa, bu dəyəri fərqli ad ilə əlavə prop kimi göndərmək lazımdır:

```js{3,4}
const content = posts.map((post) =>
Expand All @@ -259,11 +259,11 @@ const content = posts.map((post) =>
);
```

With the example above, the `Post` component can read `props.id`, but not `props.key`.
Göstərilən nümumədə, `Post` komponenti `props.id`-ni oxuya bilir. Lakin, `props.key`-i oxuya bilmir.

### Embedding map() in JSX {#embedding-map-in-jsx}
### map() Funksiyasını JSX-ə Daxil Edin {#embedding-map-in-jsx}

In the examples above we declared a separate `listItems` variable and included it in JSX:
Yuxarıdakı nümunələrdə, biz massivləri ayrı `listItems` dəyişəninə təyin edib, bu dəyişəni JSX-ə daxil edirdik:

```js{3-6}
function NumberList(props) {
Expand All @@ -280,7 +280,7 @@ function NumberList(props) {
}
```

JSX allows [embedding any expression](/docs/introducing-jsx.html#embedding-expressions-in-jsx) in curly braces so we could inline the `map()` result:
JSX, fiqur mötərizədə [hər bir ifadəni daxil etməyə](/docs/introducing-jsx.html#embedding-expressions-in-jsx) icazə verdiyindən biz `map()`-in nəticəsini eyni sətrdə JSX-ə daxil edə bilərik:

```js{5-8}
function NumberList(props) {
Expand All @@ -296,6 +296,6 @@ function NumberList(props) {
}
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
[**CodePen-də sınayın**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)

Sometimes this results in clearer code, but this style can also be abused. Like in JavaScript, it is up to you to decide whether it is worth extracting a variable for readability. Keep in mind that if the `map()` body is too nested, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
Bu stilin təmiz kod ilə nəticələnməsinə baxmayaraq, bu stili çox istifadə etmək ziyanlı ola bilər. JavaScript-də olduğu kimi, oxunuşu artırmaq üçün dəyəri dəyişənə çıxarmaq sizdən asılıdır. Əgər `map()` çağırışının gövdəsi çox iç-içədirsə, [komponenti çıxarmaq](/docs/components-and-props.html#extracting-components) yaxşı fikir ola bilər.