Translate Conditional Rendering

content/docs/conditional-rendering.md

@@ -1,30 +1,30 @@
 ---
 id: conditional-rendering
-title: Conditional Rendering
+title: Şərti Render Etmə
 permalink: docs/conditional-rendering.html
 prev: handling-events.html
 next: lists-and-keys.html
 redirect_from:
   - "tips/false-in-jsx.html"
 ---
 
-In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
+React-də siz ehtiyacınız olan davranışı ininkapsulyasiya edən fərqli komponentləri yarada bilərsiniz. Daha sonra, siz applikasiyanızın vəziyyətindən asılı olaraq bəzi komponentləri render edə bilərsiniz.
 
-Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.
+Şərti render etmə JavaScript-də işlədiyi kimi React-də işlənilir. Hazırki vəziyyəti təmsil etmək üçün elemetləri yaratmağa və React yenilənmələrini UI ilə uyğunlaşdırmaq üçün [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) və ya [şərti operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) kimi Javascript operatorlarını istifadə edin.
 
-Consider these two components:
+Bu iki komponentləri nəzərə alın:
 
 ```js
 function UserGreeting(props) {
-  return <h1>Welcome back!</h1>;
+  return <h1>Xoş Gəlmisiniz!</h1>;
 }
 
 function GuestGreeting(props) {
-  return <h1>Please sign up.</h1>;
+  return <h1>Xahiş edirik registrasiya edin.</h1>;
 }
 ```
 
-We'll create a `Greeting` component that displays either of these components depending on whether a user is logged in:
+Biz, hansı istifadəçinin daxil olmasını nəzərə alaraq, bu komponentlərin hansınısa təsvir edən `Greeting` komponenti yaradacağıq:
 
 ```javascript{3-7,11,12}
 function Greeting(props) {
@@ -42,37 +42,37 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
+[**CodePen-də yoxlayın**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
 
-This example renders a different greeting depending on the value of `isLoggedIn` prop.
+Bu nümunə `isLoggedIn` propunun dəyərindən asılı olaraq müxtəlif salamlama mətni render edir.
 
-### Element Variables {#element-variables}
+### Element Dəyişənləri {#element-variables}
 
-You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change.
+Siz elementləri saxlamaq üçün dəyişənləri istifadə edə bilərsiniz. Bu sizə nəticənin qalan hissəsini dəyişmədən komponentin bir hissəsini şərti olaraq render etməyə imkan verəcək.
 
-Consider these two new components representing Logout and Login buttons:
+Yeni iki komponentləri təmsil edən Çıxış və "Daxil Ol" düymələrini nəzərə alın:
 
 ```js
 function LoginButton(props) {
   return (
     <button onClick={props.onClick}>
-      Login
+      Daxil Ol
     </button>
   );
 }
 
 function LogoutButton(props) {
   return (
     <button onClick={props.onClick}>
-      Logout
+      Çıxış
     </button>
   );
 }
 ```
 
-In the example below, we will create a [stateful component](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called `LoginControl`.
+Aşağıdakı misalda biz `LoginControl` adlanan [state-li komponent](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) yaradacağıq.
 
-It will render either `<LoginButton />` or `<LogoutButton />` depending on its current state. It will also render a `<Greeting />` from the previous example:
+Bu hazırki vəziyyəti nəzərə alaraq `<LoginButton />` və ya `<LogoutButton />` render edəcək. Bu həmçinin əvvəlki misalda olan `<Greeting />`-i render edəcək:
 
 ```javascript{20-25,29,30}
 class LoginControl extends React.Component {
@@ -116,13 +116,13 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
+[**CodePen-də yoxlayın**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
 
-While declaring a variable and using an `if` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below.
+`if` operatorunu istifadə edərək dəyişəni bəyan etmək şərti olaraq komponenti render etməyin yaxşı üsuludur, bəzən siz qısa sintaksis istifadə etmək istəyə bilərsiz. Aşağıda göstərildiyi kimi, JSX-də sətirdaxili şərtlər üçün bir neçə üsul var.
 
-### Inline If with Logical && Operator {#inline-if-with-logical--operator}
+### Sətirdaxili If Məntiqi && Operatoru ilə {#inline-if-with-logical--operator}
 
-You may [embed any expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical `&&` operator. It can be handy for conditionally including an element:
+Siz formalı mötərizə ilə [hər hansı ifadələri JSX-də əlaqələndirə](/docs/introducing-jsx.html#embedding-expressions-in-jsx) bilərsiniz. Buna JavaScript məntiqi `&&` operatoru daxildir. Bu şərti olaraq elementi daxil etdikdə yararlı ola bilər:
 
 ```js{6-10}
 function Mailbox(props) {
@@ -132,7 +132,7 @@ function Mailbox(props) {
       <h1>Hello!</h1>
       {unreadMessages.length > 0 &&
         <h2>
-          You have {unreadMessages.length} unread messages.
+          Sizdə {unreadMessages.length} oxunmamış mesaj var.
         </h2>
       }
     </div>
@@ -146,30 +146,30 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
+[**CodePen-də yoxlayın**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
 
-It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`.
+Bu işləyir çünki JavaScript-də `true && expression` həmişə `expression`-a hesablanır və `false && expression` həmişə `false`-a hesablanır.
 
-Therefore, if the condition is `true`, the element right after `&&` will appear in the output. If it is `false`, React will ignore and skip it.
+Buna görə də, əgər şərt `true`-dursa, `&&`-dən sonrakı element nəticədə görünəcək. Əgər `false`-dursa, React onu nəzərə almır və ötür.
 
-### Inline If-Else with Conditional Operator {#inline-if-else-with-conditional-operator}
+### Sətirdaxili If-Else Şərti Operatoru ilə {#inline-if-else-with-conditional-operator}
 
-Another method for conditionally rendering elements inline is to use the JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).
+Elementlərin sətirdaxili şərti render edilməsi üçün digər üsul JavaScript-in [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) şərti operatorunu istifadə etməkdir.
 
-In the example below, we use it to conditionally render a small block of text.
+Aşağıdakı misalda, biz bunu balaca mətn qutusunu şərti olaraq render etmək üçün istifadə etdik.
 
 ```javascript{5}
 render() {
   const isLoggedIn = this.state.isLoggedIn;
   return (
     <div>
-      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
+      İstifadəçi daxil <b>{isLoggedIn ? 'olub' : 'olmayıb'}</b>.
     </div>
   );
 }
 ```
 
-It can also be used for larger expressions although it is less obvious what's going on:
+Bu daha geniş ifadələr üçün istifadə oluna bilər. Amma bu formada daha çətin başa düşülən olur:
 
 ```js{5,7,9}
 render() {
@@ -186,13 +186,13 @@ render() {
 }
 ```
 
-Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
+Javascript-də olduğu kimi, siz və sizin komandanızın qərarlaşdırdığınız oxuna bilməyə əsasən müvafiq stili seçmək sizə bağlıdır. Həmçinin yadda saxlayın ki, şərtlər kompleksləşdiyi zaman [komponenti çıxarmaq](/docs/components-and-props.html#extracting-components) daha düzgün yol ola bilər.
 
-### Preventing Component from Rendering {#preventing-component-from-rendering}
+### Komponentin Render Edilməsinin Qarşısını Almaq {#preventing-component-from-rendering}
 
-In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return `null` instead of its render output.
+Nadir hallarda siz komponentin digər komponent tərəfindən render edildiyinə baxmayaraq, özünü gizlətməsini istəyə bilərsiniz. Bunun üçün nəticəni render etməkdənsə, `null` qaytarın.
 
-In the example below, the `<WarningBanner />` is rendered depending on the value of the prop called `warn`. If the value of the prop is `false`, then the component does not render:
+Aşağıdakı nümunədə `warn` adlanan propun dəyərindən asılı olaraq `<WarningBanner />` render olunur. Əgər propun dəyəri `false`-dursa, bu halda komponent render etmir:
 
 ```javascript{2-4,29}
 function WarningBanner(props) {
@@ -202,7 +202,7 @@ function WarningBanner(props) {
 
   return (
     <div className="warning">
-      Warning!
+      Xəbərdarlıq!
     </div>
   );
 }
@@ -225,7 +225,7 @@ class Page extends React.Component {
       <div>
         <WarningBanner warn={this.state.showWarning} />
         <button onClick={this.handleToggleClick}>
-          {this.state.showWarning ? 'Hide' : 'Show'}
+          {this.state.showWarning ? 'Göstər' : 'Gizlət'}
         </button>
       </div>
     );
@@ -238,6 +238,6 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)
+[**CodePen-də yoxlayın**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)
 
-Returning `null` from a component's `render` method does not affect the firing of the component's lifecycle methods. For instance `componentDidUpdate` will still be called.
+Komponentin `render` üsulundan `null` qaytarmaq, komponentin lifecycle funksiyalarının çağrılmasına təsir etmir. Məsələn, `componentDidUpdate` yenədə çağırılacaqdır.