Apply suggestions from code review by @alinkedd

Co-authored-by: Alina Listunova <[email protected]>

Author: ltlaitoff

Diff for: src/content/learn/passing-props-to-a-component.md

@@ -20,7 +20,7 @@ title: Передача пропсів до компонента
 
 ## Знайомі пропси {/*familiar-props*/}
 
-Пропси — це інформація, яку ви передаєте до тегу JSX. Наприклад, `className`, `src`, `alt`, `width` та `height` деякі з пропсів, які ви можете передати до тегу `<img>`:
+Пропси — це інформація, яку ви передаєте до тегу JSX. Наприклад, `className`, `src`, `alt`, `width` та `height` — деякі з пропсів, які ви можете передати до тегу `<img>`:
 
 <Sandpack>
 
@@ -100,7 +100,7 @@ function Avatar({ person, size }) {
 }
 ```
 
-Додайте деяку логіку до `Avatar`, яка використовує пропси `person` та `size` для відображення і готово.
+Додайте трохи логіки до `Avatar`, яка використовує пропси `person` та `size` для відображення, і готово.
 
 Тепер ви можете налаштувати `Avatar` для відображення багатьма різними способами з різними пропсами. Спробуйте змінити значення!
 
@@ -170,7 +170,7 @@ body { min-height: 120px; }
 
 Props дозволяють вам думати про батьківські та дочірні компоненти незалежно. Наприклад, ви можете змінити проп `person` або `size` всередині `Profile`, не думаючи про те, як `Avatar` використовує їх. Аналогічно, ви можете змінити спосіб використання `Avatar` цих пропсів, не звертаючи уваги на `Profile`.
 
-Ви можете уявляти пропси як "ручки", які ви можете налаштовувати. Вони виконують ту саму роль, що і аргументи для функцій - насправді, пропси _є_ єдиним аргументом вашого компонента! Функції компонентів React приймають один аргумент - об'єкт `props`:
+Уявіть пропси як «ручки регулювання», які ви можете налаштовувати. Вони виконують ту саму роль, що і аргументи для функцій — насправді, пропси _є_ єдиним аргументом вашого компонента! Функції компонентів React приймають один аргумент — об'єкт `props`:
 
 ```js
 function Avatar(props) {
@@ -251,11 +251,11 @@ function Profile(props) {
 
 Це передає всі пропси `Profile` до `Avatar` без перерахування кожного з їх імен.
 
-**Використовуйте синтаксис spread з обережністю.** Якщо ви використовуєте його в кожному другому компоненті щось пішло не так. Часто це означає, що вам слід розбити ваші компоненти і передавати дітей як JSX. Детальніше про це далі!
+**Використовуйте синтаксис spread з обережністю.** Якщо ви використовуєте його в кожному наступному компоненті, то щось пішло не так. Часто це свідчить про те, що вам слід розбити компоненти і передавати дітей як JSX. Детальніше про це далі!
 
 ## Передача JSX як дітей {/*passing-jsx-as-children*/}
 
-Вкладення вбудованих тегів браузера є звичайним ділом:
+Вкладення вбудованих тегів браузера є звичайною справою:
 
 ```js
 <div>
@@ -271,7 +271,7 @@ function Profile(props) {
 </Card>
 ```
 
-Коли ви вкладаєте вміст всередині тегу JSX, батьківський компонент отримує цей вміст у властивості з назвою `children`. Наприклад, компонент `Card` нижче отримає проп `children`, встановлену на `<Avatar />` і відображатиме його в обгортковому div:
+Коли ви вкладаєте вміст всередині тегу JSX, батьківський компонент отримує цей вміст у властивості з назвою `children`. Наприклад, компонент `Card` нижче отримає проп `children` зі значенням `<Avatar />` і відображатиме його в обгортковому div:
 
 <Sandpack>
 
@@ -347,11 +347,11 @@ export function getImageUrl(person, size = 's') {
 
 </Sandpack>
 
-Спробуйте замінити `<Avatar>` всередині `<Card>` на деякий текст, щоб побачити, як компонент `Card` може обгорнути будь-який вкладений вміст. Він не потребує "знати", що саме рендериться всередині нього. Ви ще побачите цей гнучкий шаблон в багатьох місцях.
+Спробуйте замінити `<Avatar>` всередині `<Card>` на деякий текст, щоб побачити, як компонент `Card` може обгорнути будь-який вкладений вміст. Він не потребує "знати", що саме рендериться всередині нього. Ви ще побачите цей гнучкий шаблон у багатьох місцях.
 
 Ви можете уявляти компонент з пропом `children` як компонент з "отвіром", який може бути "заповнений" батьківськими компонентами з довільним JSX. Ви часто будете використовувати властивість `children` для візуальних обгорток: панелей, сіток і т.д.
 
-<Illustration src="/images/docs/illustrations/i_children-prop.png" alt='Подібна до головоломки плитка Card з слотами для "дочірніх" шматочків, наприклад текст або Avatar' />
+<Illustration src="/images/docs/illustrations/i_children-prop.png" alt='Подібна до головоломки плитка Card зі слотами для "дочірніх" шматочків, наприклад текст або Avatar' />
 
 ## Як пропси змінюються з часом {/*how-props-change-over-time*/}
 
@@ -409,19 +409,19 @@ export default function App() {
 
 Цей приклад показує, що **компонент може отримувати різні пропси з часом**. Пропси не завжди є статичними! Тут проп `time` змінюється кожну секунду, а проп `color` змінюється, коли ви вибираєте інший колір. Пропси відображають дані компонента в будь-який момент часу, а не лише на початку.
 
-Однак, пропси є [незмінними(immutable)](https://uk.wikipedia.org/wiki/%D0%9D%D0%B5%D0%B7%D0%BC%D1%96%D0%BD%D0%BD%D0%B8%D0%B9_%D0%BE%D0%B1%27%D1%94%D0%BA%D1%82) — термін з комп'ютерних наук, що означає "незмінні". Коли компоненту потрібно змінити свої пропси (наприклад, відповідно до взаємодії користувача або нових даних), він повинен "запитати" свій батьківський компонент передати йому _інші пропси_ — новий об'єкт! Його старі пропси будуть відкинуті, і, врешті-решт, рушій JavaScript звільнить пам'ять, яку вони займали.
+Однак, пропси є [незмінними (immutable)](https://uk.wikipedia.org/wiki/%D0%9D%D0%B5%D0%B7%D0%BC%D1%96%D0%BD%D0%BD%D0%B8%D0%B9_%D0%BE%D0%B1%27%D1%94%D0%BA%D1%82). Коли компоненту потрібно змінити свої пропси (наприклад, відповідно до взаємодії користувача або нових даних), він повинен «попросити» свій батьківський компонент передати йому _інші пропси_ — новий об'єкт! Його старі пропси будуть відкинуті, і, врешті-решт, рушій JavaScript звільнить пам'ять, яку вони займали.
 
-**Не намагайтеся «змінювати пропси»**. Коли вам потрібно реагувати на введення користувача (наприклад, змінювати вибраний колір), вам потрібно «встановити стан», про що ви можете дізнатися в [Стан: Пам'ять компонента.](/learn/state-a-components-memory)
+**Не намагайтеся «змінювати пропси»**. Щоб реагувати на введення користувача (наприклад, змінювати вибраний колір), вам потрібно «встановити стан», про що ви можете дізнатися у розділі [Стан: Пам'ять компонента.](/learn/state-a-components-memory)
 
 <Recap>
 
-* Щоб передати пропси, додайте їх до JSX, так само, як ви робите з атрибутами HTML.
+* Щоб передати пропси, додайте їх до JSX подібно до атрибутів HTML.
 * Щоб прочитати пропси, використовуйте синтаксис деструктуризації `function Avatar({ person, size })`.
 * Ви можете вказати значення за замовчуванням, наприклад, `size = 100`, яке використовується для відсутніх та `undefined` пропсів.
 * Ви можете передати всі пропси JSX за допомогою синтаксису розширення `<Avatar {...props} />`, але не зловживайте цим!
 * Вкладений JSX, наприклад `<Card><Avatar /></Card>`, буде виглядати як проп `children` компонента `Card`.
 * Пропси в момент часу можуть бути використані тільки для читання: кожен рендер отримує нову версію пропсів.
-* Ви не можете змінювати пропси. Коли вам потрібна взаємодія, вам потрібно встановити стан.
+* Ви не можете змінювати пропси. Для інтерактивності використовуйте стан.
 
 </Recap>
 
@@ -524,7 +524,7 @@ li { margin: 5px; }
 
 <Hint>
 
-Почніть з винесення розмітки для одного з вчених. Потім знайдіть частини, які не відповідають йому в другому прикладі, і зробіть їх налаштовуваними за допомогою пропсів.
+Почніть з винесення розмітки для одного з вчених. Потім знайдіть частини, які не відповідають їй у другому прикладі, і зробіть їх налаштовуваними за допомогою пропсів.
 
 </Hint>
 
@@ -630,9 +630,9 @@ li { margin: 5px; }
 
 </Sandpack>
 
-Зверніть увагу, якщо `awards` є масивом, вам не потрібен окремий проп `awardCount`. Тоді ви можете використовувати `awards.length`, щоб підрахувати кількість нагород. Пам'ятайте, що пропси можуть приймати будь-які значення, включаючи масиви!
+Зверніть увагу: якщо `awards` є масивом, вам не потрібний окремий проп `awardCount`. У цьому випадку ви можете використовувати `awards.length`, щоб підрахувати кількість нагород. Пам'ятайте, що пропси можуть приймати будь-які значення, включаючи масиви!
 
-Ще одне рішення, яке більше схоже на попередні приклади на цій сторінці, полягає в тому, щоб групувати всю інформацію про людину в один об'єкт і передавати цей об'єкт як один проп:
+Ще одне рішення, яке більш схоже на попередні приклади на цій сторінці, полягає в тому, щоб групувати всю інформацію про людину в один об'єкт і передавати цей об'єкт як один проп:
 
 <Sandpack>
 
@@ -733,9 +733,9 @@ li { margin: 5px; }
 
 #### Налаштування розміру зображення на основі пропу {/*adjust-the-image-size-based-on-a-prop*/}
 
-У цьому прикладі `Avatar` отримує числовий проп `size`, який визначає ширину та висоту елемента `<img>`. У цьому прикладі проп `size` встановлено на `40`. Однак, якщо ви відкриєте зображення в новій вкладці, ви помітите, що саме зображення більше (`160` пікселів). Розмір реального зображення визначається розміром ескізу, який ви запитуєте.
+У цьому прикладі компонент `Avatar` отримує числовий проп `size`, який визначає ширину та висоту елемента `<img>`. Для пропу `size` задано значення `40`. Однак, якщо ви відкриєте зображення в новій вкладці, ви помітите, що саме зображення є більшим (`160` пікселів). Справжній розмір зображення визначається розміром ескізу, який ви запитуєте.
 
-Змініть компонент `Avatar`, щоб він запитував найближчий розмір зображення на основі пропу `size`. Зокрема, якщо `size` менше `90`, передайте `'s'` ("малий(small)") замість `'b'` ("великий(big)") до функції `getImageUrl`. Переконайтеся, що ваші зміни працюють, рендеруючи аватари з різними значеннями пропу `size` та відкриваючи зображення в новій вкладці.
+Змініть компонент `Avatar`, щоб він запитував найближчий розмір зображення на основі пропу `size`. Зокрема, якщо `size` менше `90`, передайте `'s'` (від англ. «small» — малий) замість `'b'` (від англ. «big» — великий) у функцію `getImageUrl`. Переконайтеся, що ваші зміни працюють, виконуючи рендер аватарів з різними значеннями пропу `size` та відкриваючи зображення в новій вкладці.
 
 <Sandpack>
 
@@ -786,7 +786,7 @@ export function getImageUrl(person, size) {
 
 <Solution>
 
-Ось як ви можете з цим справитися:
+Ось як ви можете з цим упоратися:
 
 <Sandpack>
 
@@ -848,7 +848,7 @@ export function getImageUrl(person, size) {
 
 </Sandpack>
 
-Ви також можете показати більш чітке зображення для екранів з високою щільністю пікселів, враховуючи [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio):
+Ви також можете показати більш чітке зображення для екранів з високою щільністю пікселів, ураховуючи [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio):
 
 <Sandpack>