Apply suggestions from code review

Author: bkatsevych

src/content/learn/conditional-rendering.md

@@ -4,7 +4,7 @@ title: Умовний рендеринг
 
 <Intro>
 
-Ваши компоненти часто потребують відображати різний контент в залежності від умови. У React ви можете умовно рендерити JSX, використовуючи синтаксис JavaScript: оператори `if`, `&&` та `? :`.
+Ваші компоненти часто матимуть потребу відображати різні речі в залежності від різних умов. У React ви можете умовно рендерити JSX, використовуючи синтаксис JavaScript: оператори `if`, `&&` та `? :`.
 
 </Intro>
 
@@ -100,13 +100,13 @@ export default function PackingList() {
 
 </Sandpack>
 
-Спробуйте змінити код цього прикладу та подивіться, як змінюється результат!
+Спробуйте змінити що повертає цей код цього в обох випадках та подивіться, як змінюється результат!
 
-Зверніть увагу, як ви створюєте розгалужену логіку використовуючи `if` та `return` із JavaScript. У React керування потоком (наприклад, умовами) обробляється за допомогою JavaScript.
+Зверніть увагу на те, як ви створюєте розгалужену логіку з JavaScript `if` та `return` виразами. У React, потік контролю (так само як і умови, стани) обробляється за допомогою JavaScript.
 
-### Умовне повернення пустоти за допомогою `null` {/*conditionally-returning-nothing-with-null*/}
+### Умовне повернення нічого за допомогою `null` {/*conditionally-returning-nothing-with-null*/}
 
-У деяких ситуаціях ви хочете взагалі нічого не відображати. Наприклад, скажімо, ви не хочете показувати запаковані елементи взагалі. Але компонент повинен повертати щось. У цьому випадку ви можете повернути `null`:
+У певних ситуаціях, ви не хотітимете рендерити взагалі будь-що. Наприклад, скажімо, ви не хочете рендерити запаковані елементи взагалі. Але компонент повинен повертати щось. У цьому випадку ви можете повернути `null`:
 
 ```js
 if (isPacked) {
@@ -152,11 +152,11 @@ export default function PackingList() {
 
 </Sandpack>
 
-Практика поверення `null` з компонента не є поширенною, оскільки це може здивувати розробника, який намагається його відобразити. Частіше ви б умовно включали або виключали компонент у JSX батьківського компонента. Ось як це зробити!
+Повернення `null` з компонента не є поширеною практикою, оскільки це може застати зненацька розробника, який намагається його відобразити. Часто, ви умовно включатимете або виключатимете компонент в JSX батьківського компонента. Ось як це зробити!
 
 ## Умовне включення JSX {/*conditionally-including-jsx*/}
 
-У попередньому прикладі ви контролювали, яке JSX-дерево повертатиме компонент, якщо взагалі буде. Ви вже могли помітити деяке дублювання у результаті рендера:
+У попередньому прикладі ви контролювали, яке JSX-дерево буде повернено компонентом. Ви вже могли помітити деяке дублювання у виводі рендеру:
 
 ```js
 <li className="item">{name} ✔</li>
@@ -168,7 +168,7 @@ export default function PackingList() {
 <li className="item">{name}</li>
 ```
 
-Обидві умовні гілки повертають `<li className="item">...</li>`:
+Обидві гілки умов повертають `<li className="item">...</li>`:
 
 ```js
 if (isPacked) {
@@ -177,7 +177,7 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-Хоча це дублювання не шкідливе, воно може ускладнити підтримку вашого коду. Що, якщо ви хочете змінити `className`? Вам доведеться робити це в двох місцях у вашому коду! У такій ситуації ви могли б умовно включити трохи JSX, щоб зробити ваш код більш [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)
+Хоча це дублювання не є шкідливим, воно може ускладнити підтримування вашого коду. Що, якщо ви захочете змінити `className`? Вам доведеться зробити це в двох місцях вашого коду! У такій ситуації ви могли б умовно включити трохи JSX, щоб зробити ваш код більш [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)
 
 ### Умовний (тернарний) оператор (`? :`) {/*conditional-ternary-operator--*/}
 
@@ -202,17 +202,17 @@ return (
 );
 ```
 
-Це можна прочитати як *"якщо `isPacked` -- true, тоді (`?`) відобразити `name + ' ✔'`, в іншому випадку (`:`) відобразити `name`"*.
+Це можна прочитати як *"якщо `isPacked` є true, тоді (`?`) відобразити `name + ' ✔'`, в іншому випадку (`:`) відобразити `name`"*.
 
 <DeepDive>
 
 #### Чи ці два приклади повністю еквівалентні? {/*are-these-two-examples-fully-equivalent*/}
 
-Якщо ви прийшли з об'єктно-орієнтованого програмування, ви можете припустити, що два приклади вище є трохи різними, оскільки один з них може створити два різних "екземпляри" `<li>`. Але JSX-елементи не є "екземплярами", оскільки вони не містять жодного внутрішнього стану і не є реальними вузлами DOM. Це легкі описи, подібні до креслень. Таким чином, ці два приклади, насправді, *є* абсолютно еквівалентними. [Збереження та скидання стану](/learn/preserving-and-resetting-state) детально розповідає про те, як це працює.
+Якщо у вас є досвід з об'єктно-орієнтованого програмування, ви можете припустити, що два приклади вище є трохи різними, оскільки один з них може створити дві різні "сутності" `<li>`. Але JSX-елементи не є "сутностями", оскільки вони не містять жодного внутрішнього стану і не є реальними вузлами DOM. Це легкі описи, подібні до креслень. Таким чином, ці два приклади, насправді, *є* абсолютно еквівалентними. [Збереження та скидання стану](/learn/preserving-and-resetting-state) детально розповідає про те, як це працює.
 
 </DeepDive>
 
-Тепер, скажімо, ви хочете обернути текст елемента в інший HTML-тег, наприклад `<del>`, щоб його перекреслити. Ви можете додати ще більше нових рядків і дужок, щоб було легше використовувати вкладенний JSX в кожному з випадків:
+Тепер, скажімо, ви хочете обгорнути текст елемента в інший HTML-тег, наприклад `<del>`, щоб його перекреслити. Ви можете додати ще більше нових рядків і дужок, щоб було легше використовувати вкладенний JSX в кожному з випадків:
 
 <Sandpack>
 
@@ -256,11 +256,11 @@ export default function PackingList() {
 
 </Sandpack>
 
-Цей стиль добре працює для простих умов, але використовуйте його з розумом. Якщо ваші компоненти стають заплутаними через занадто великі вкладені умовні розмітки, розгляньте можливість витягнення дочірніх компонентів, щоб все виглядало охайніше та зрозуміліше. У React розмітка є частиною вашого коду, тому ви можете використовувати такі інструменти, як змінні та функції, щоб спростити складні вирази.
+Цей стиль добре працює для простих умов, але використовуйте його з розумом. Якщо ваші компоненти стають заплутаними через велику вкладену умовну розмітку, подумайте над "розпакуванням" дочірніх компонентів, щоб все виглядало охайніше. У React розмітка є частиною вашого коду, тому ви можете використовувати такі інструменти, як змінні та функції, щоб спростити складні вирази.
 
 ### Логічний оператор AND (`&&`) {/*logical-and-operator-*/}
 
-Інший поширений шорткат, з яким ви зіткнетеся -- [логічний оператор AND (`&&`) JavaScript.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Всередині компонентів React він часто з'являється, коли ви хочете відрендерити деякий JSX, коли умова є істинною, **або нічого не рендерити в іншому випадку.** З `&&` ви могли б умовно відрендерити позначку, лише якщо `isPacked` дорівнює `true`:
+Ще одне поширене скорочення, з яким ви зіткнетеся -- [логічний оператор AND (`&&`) JavaScript.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Всередині компонентів React він часто з'являється, коли ви хочете відрендерити деякий JSX, коли умова є `true`, **або нічого не рендерити в іншому випадку.** З `&&` ви могли б умовно відрендерити позначку, лише якщо `isPacked` є `true`:
 
 ```js
 return (
@@ -317,9 +317,9 @@ export default function PackingList() {
 
 **Не ставте числа зліва від `&&`.**
 
-Щоб перевірити умову, JavaScript автоматично перетворює ліву сторону на булеве значення. Однак, якщо ліва сторона дорівнює `0`, то весь вираз отримує це значення (`0`), і React з задоволенням відрендерить `0` замість нічого.
+Щоб перевірити умову, JavaScript автоматично перетворює ліву сторону на булеве значення. Однак, якщо ліва сторона є `0`, то весь вираз отримує це значення (`0`), і React з задоволенням відрендерить `0` замість нічого.
 
-Наприклад, поширеною помилкою є написання коду типу `messageCount && <p>New messages</p>`. Легко припустити, що він не рендерить нічого, коли `messageCount` дорівнює `0`, але насправді він рендерить сам `0`!
+Наприклад, поширеною помилкою є написання коду типу `messageCount && <p>New messages</p>`. Легко припустити, що він  нічого не рендерить, коли `messageCount` дорівнює `0`, але насправді він рендерить сам `0`!
 
 Щоб виправити це, зробіть ліву сторону булевою: `messageCount > 0 && <p>New messages</p>`.
 
@@ -341,7 +341,7 @@ if (isPacked) {
 }
 ```
 
-[Фігурні дужки відкривають "вікно в JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Вбудуйте змінну з фігурними дужками в JSX-дерево, вкладаючи раніше обчислений вираз всередину JSX:
+[Фігурні дужки відкривають "вікно в JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Вбудуйте змінну з фігурними дужками в повернене JSX-дерево, вкладаючи раніше обчислений вираз всередині JSX:
 
 ```js
 <li className="item">
@@ -437,7 +437,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-Якщо ви не знайомі з JavaScript, цей різноманітний стиль може здатися вам спочатку приголомшливим. Однак, вивчення різних з них допоможе вам читати та писати будь-який код JavaScript -- і не тільки компоненти React! Виберіть той, який вам більше подобається для початку, а потім зверніться до цього довідника знову, якщо ви забудете, як працюють інші.
+Якщо ви не знайомі з JavaScript, то ця різноманітність стилів може спершу здатися вам занадто складною. Однак, їх знання допоможе вам читати та писати будь-який код JavaScript -- і не тільки компоненти React! Виберіть той, який вам більше подобається для початку, а потім зверніться до цього довідника знову, якщо ви забудете, як працюють інші.
 
 <Recap>
 
@@ -632,7 +632,7 @@ export default function PackingList() {
 
 #### Рефакторінг послідовності `? :` на `if` та змінні {/*refactor-a-series-of---to-if-and-variables*/}
 
-Цей компонент `Drink` використовує послідовність умов `? :` для відображення різної інформації в залежності від того, чи є проп `name` `"tea"` або `"coffee"`. Проблема в тому, що інформація про кожний напій розподілена між кількома умовами. Рефакторінг цього коду, щоб використовувати один `if` замість трьох умов `? :`.
+Цей компонент `Drink` використовує послідовність умов `? :` для відображення різної інформації в залежності від того, чи проп `name` є `"tea"` або `"coffee"`. Проблема в тому, що інформація про кожний напій розподілена між кількома умовами. Відрефакторіть цей код, щоб використовувати один `if` замість трьох умов `? :`.
 
 <Sandpack>
 
@@ -665,7 +665,7 @@ export default function DrinkList() {
 
 </Sandpack>
 
-Після того, як ви рефакторили код, щоб використовувати `if`, у вас є ідеї, як його можна спростити?
+Після того, як ви відрефакторили код, щоб використовувати `if`, у вас є ще ідеї, як його можна спростити?
 
 <Solution>