fix: misspellings

Author: Dmytrii248

src/content/learn/sharing-state-between-components.md

@@ -4,7 +4,7 @@ title: Спільний доступ до стану між компонента
 
 <Intro>
 
-Інколи ви хочете, щоб стан двох компонент завжди змінювався разом. Щоб так зробити, видаліть стан з обох компонент, перенесіть його до їхнього найближчого спільного батька та потім передайте його вниз до них завдяки пропсам. Це відоме як *підняття стану вгору* і це одна з найпоширеніших речей, які ви будете робити під час написання React коду.  
+Іноді вам потрібно, щоб стан двох компонент завжди змінювався разом. Щоб так зробити, видаліть стан з обох компонент, перенесіть його до їхнього найближчого спільного батька та потім передайте стан вниз до них завдяки пропсам. Це відоме як *підняття стану вгору* і це одна з найпоширеніших речей, які ви будете робити під час написання React коду.  
 
 </Intro>
 
@@ -17,13 +17,13 @@ title: Спільний доступ до стану між компонента
 
 ## Підняття стану на прикладі {/*lifting-state-up-by-example*/}
 
-В цьому прикладі, батьківський `Accordion` компонент рендерить дві окремі `Panel`і:
+В цьому прикладі, батьківський компонент `Accordion` рендерить дві окремі `Panel`:
 
 * `Accordion`
   - `Panel`
   - `Panel`
 
-Кожний `Panel` компонент має булевий `isActive` стан, що визначає чи її вміст видимий. 
+Кожний `Panel` компонент має булевий `isActive` стан, що визначає чи його вміст видимий. 
 
 Натисніть кнопку Показати для обох панелей: 
 
@@ -99,11 +99,11 @@ h3, p { margin: 5px 0px; }
 2. **Передати** жорсткокодовані дані від спільного батька.
 3. **Додати** стан до спільного батька і передати його вниз разом з обробниками подій.
 
-Це дозволить компоненту `Accordion`скоординувати обидві `Panel` і розгортати тільки одну на раз.
+Це дозволить компоненту `Accordion`скоординувати обидві `Panel` та розгортати тільки одну на раз.
 
 ### Крок 1: Видаліть стан з дочірніх компонент {/*step-1-remove-state-from-the-child-components*/}
 
-Ви передасьте контроль `isActive` до `Panel` батьківського компонента. Це означає що батьківський компоненнт передасть `isActive` до `Panel` як проп. Почніть з **видалення цього рядка** з `Panel` компонента:
+Ви передасте контроль `isActive` `Panel` до її батьківської компоненти. Це означає що батьківський компоненнт передасть `isActive` до `Panel` як проп. Почніть з **видалення цього рядка** з `Panel` компонента:
 
 ```js
 const [isActive, setIsActive] = useState(false);
@@ -115,17 +115,17 @@ const [isActive, setIsActive] = useState(false);
 function Panel({ title, children, isActive }) {
 ```
 
-Тепер батьківський компонента `Panel` може *контролювати* `isActive`, [передаючи його як проп.](/learn/passing-props-to-a-component) І навпаки, `Panel` компонент тепер *не має контролю* над значенням `isActive`-- тепер це залежить від батьківського компонента!
+Тепер батьківський компонент `Panel` може *контролювати* `isActive`, [передаючи його як проп.](/learn/passing-props-to-a-component) І навпаки, `Panel` компонент тепер *не має контролю* над значенням `isActive`-- тепер це залежить від батьківського компонента!
 
 ### Крок 2: Передайте жорсткокодовані дані з батьківського компонента {/*step-2-pass-hardcoded-data-from-the-common-parent*/}
 
-Щоб підняти стан вгору, ви повинні виявити найближчий спільний батьківський компонент *обох* дочірніх компонентів, які ви хочете скоординувати:
+Щоб підняти стан вгору, ви повинні виявити найближчий спільний батьківський компонент *обох* дочірніх компонент, які ви хочете скоординувати:
 
 * `Accordion` *(найближчий спільний батько)*
   - `Panel`
   - `Panel`
 
-У цьому прикладі, компонент `Accordion`. Оскільки він знаходиться над обогома панелями і може контролювати їхні пропси, це стане "джерелом правди" для визначення, яка панель є відкритою на даний момент. Зробіть так щоб компонент `Accordion` передавав жорсткокодоване значення `isActive` (наприклад, `true`) до обидвох панелей:
+У цьому прикладі, компонент `Accordion`. Оскільки він знаходиться над обома панелями і може контролювати їхні пропси, це стане "джерелом правди" для визначення, яка панель є відкритою на даний момент. Зробіть так щоб компонент `Accordion` передавав жорсткокодоване значення `isActive` (наприклад, `true`) до обидвох панелей:
 
 <Sandpack>
 
@@ -172,13 +172,13 @@ h3, p { margin: 5px 0px; }
 
 </Sandpack>
 
-Спробуйте відредагувати жорсткокодовані значення `isActive` у компоненті `Accordion` і подивіться на результат на екрані.
+Спробуйте відредагувати жорсткокодовані значення `isActive` у компоненті `Accordion` та подивіться результат на екрані.
 
 ### Крок 3: Добавте стан до батьківської компоненти {/*step-3-add-state-to-the-common-parent*/}
 
 Підйом стану вгору часто змінює природу того, що ви зберігаєте як стан.
 
-В цьому випадку, тільки одна панель має бути актиною одночасно. Це означає що `Accordion` спільний батьківський компонент має відстежувати, *яка* панель є активною. Замість `boolean` значення, омжна використовувати число як індекс активної `Panel` для змінної стану:
+В цьому випадку, тільки одна панель має бути активною на даний момент. Це означає що `Accordion` спільний батьківський компонент має відстежувати, *яка* панель є активною. Замість `boolean` значення, можна використовувати число як індекс активної `Panel` для змінної стану:
 
 ```js
 const [activeIndex, setActiveIndex] = useState(0);
@@ -263,19 +263,19 @@ h3, p { margin: 5px 0px; }
 ```
 
 </Sandpack>
-Підняття стану вгору завершено! Переміщення стану в спільний батьківський компонент дозволяє вам скоординувати дві панелі. Використовуючи активний індекс замість двох "показано" прапорців гарантує, що тільки одна панель буде активною на даний момент. І передаючи вниз обробник подій до дочірнього компонента дозволить дочірньому компоненту змінювати батьківський стан.
+Підняття стану вгору завершено! Переміщення стану в спільний батьківський компонент дозволяє вам скоординувати дві панелі. Використовуючи активний індекс замість двох "активно" прапорців гарантує, що тільки одна панель буде активною на даний момент. І передаючи вниз обробник подій до дочірньої компоненти дозволить йому змінювати батьківський стан.
 
 <DiagramGroup>
 
-<Diagram name="sharing_state_parent" height={385} width={487} alt="Діаграма зоображає дерево із трьох компонент, один батьківський з назвою Accordion та двох дочірніх з назвами Panel. Accordion містить activeIndex нульовим значенням, яке стає isActive із значенням true, що передається до першої панелі і isActive із значенням false до другої Panel.">
+<Diagram name="sharing_state_parent" height={385} width={487} alt="Діаграма зоображає дерево із трьох компонент, один батьківський з назвою Accordion та двох дочірніх з назвами Panel. Accordion містить activeIndex із нульовим значенням, яке стає isActive із значенням true, що передається до першої панелі та isActive із значенням false до другої Panel.">
 
 Початково, `Accordion` має `activeIndex` із значенням `0`, тому перша `Panel` отримує `isActive = true`
 
 </Diagram>
 
-<Diagram name="sharing_state_parent_clicked" height={385} width={521} alt="Така сама діаграма що й попередня, тільки із activeIndex значення батьківського компонента підсвічено, що вказує клік із значенням зміненим на одиницю. Шлях до обох дочірніх Panel компонент таокж підсвічений та isActive значення, яке передане до кожної дочірньої компоненти є протилежним: false для першої Panel та true для другої" >
+<Diagram name="sharing_state_parent_clicked" height={385} width={521} alt="Така сама діаграма що й попередня, тільки activeIndex значення батьківського компонента, яке підсвічено, що вказує на клік із значенням зміненим на одиницю. Шлях до обох дочірніх Panel компонент таокж підсвічений та isActive значення, яке передане до кожної дочірньої компоненти є протилежним: false для першої Panel та true для другої" >
 
-Коли `Accordion` `activeIndex` стан змінюється на `1`, друга `Panel` отримує `isActive = true` замість
+Коли стан `Accordion` `activeIndex` змінюється на `1`, друга `Panel` отримує `isActive = true`
 
 </Diagram>
 
@@ -291,17 +291,17 @@ h3, p { margin: 5px 0px; }
 
 Неконтрольовані компоненти легше використовувати із їхніми батьківськими, оскільки вони вимагають менше налаштувань. Але вони менш гнучкі, коли ви хочете скоординувати їх разом. Контрольовані компоненти є максимально гнучкими але вони вимагають від батьківських компонент повністю налаштувати їх за допомогою пропсів.
 
-На практиці, "контрольований" та "неконтрольований" не є строгими технічними термінами--кожен компонент, зазвичай має суміш обох, із локальним станом та пропсами. Однак, це корисний спосіб, щоб поговорити як компоненти спроектовані, та які можливості вони пропонують.
+На практиці, "контрольований" та "неконтрольований" не є строгими технічними термінами--кожен компонент зазвичай має певну суміш як локального стану та пропсів. Однак, це корисний спосіб, розповісти про те, як компоненти розроблені та які можливості вони пропонують.
 
-Коли пишите компонент, подумайте, яка інформація в ньому має бути контрольованою (за допомогою пропсів), а яка інформація має бути неконтрольована (за допомогою стану). Але завжди можете передумати і покращити це пізніше.
+Коли пишите компонент, подумайте, яка інформація в ньому має бути контрольованою (за допомогою пропсів), а яка інформація має бути неконтрольована (за допомогою стану). Але завжди можете передумати і змінити це пізніше.
 
 </DeepDive>
 
 ## Єдине джерело правди для кожного стану {/*a-single-source-of-truth-for-each-state*/}
 
 В React застосунку, багато компонент матимуть їхній власний стан. Деякий стан може "жити" близько до листкових компонент (компоненти, що знаходяться внизу дерева), для прикладу, поля вводу. Інші стани можуть "жити" ближче до вершини застосунку. Для прикладу, навіть клієнтські бібліотеки маршрутизації зазвичай реалізовані за допомогою зберігання поточного маршруту в React стані та передають його вниз за допомогою пропсів!
 
-**Для кожної унікальної частинки стану, ви вибирете компонент що "належить" йому.** Цей принцип також відомий як ["єдине джерело правди"](https://en.wikipedia.org/wiki/Single_source_of_truth) Це не означає, що весь стан знаходиться в одному місці--це означає, що для _кожної_ частини стану існує _певний_ компонент, який містить ту частину інформації. Замість дублювання спільного стану між компонентами, *підніміть його вгору* до їхнього спільного батька та *передайте його вниз* до дочірніх компонент, де він потрібний. 
+**Для кожної унікальної частинки стану, ви оберете компонент що "належить" йому.** Цей принцип також відомий як ["єдине джерело правди"](https://en.wikipedia.org/wiki/Single_source_of_truth) Це не означає, що весь стан знаходиться в одному місці--це означає, що для _кожної_ частини стану існує _певний_ компонент, який містить ту частину інформації. Замість дублювання спільного стану між компонентами, *підніміть його вгору* до їхнього спільного батька та *передайте його вниз* до дочірніх компонент, де він потрібний. 
 
 Ваш застосунок буде змінюватись в міру того, як ви працюєте над ним. Часто буває так. що ви переміщуєте стан вниз або назад вгору, протягом того, як стараєтесь з'ясувати де кожен шматок стану "живе". Це все частина процесу! 
 
@@ -324,7 +324,7 @@ h3, p { margin: 5px 0px; }
 
 <Hint>
 
-Вам потрібно підняти їхній стан вгору до батьківського компонентам.
+Вам потрібно підняти їхній стан вгору до батьківської компоненти.
 
 </Hint>
 
@@ -428,7 +428,7 @@ label { display: block; }
 
 В цьому прикладі, `SearchBar` має власний `query` стан що контролює текстове поле вводу. Його батьківський `FilterableList` компонент відображає `List` елементів але це не враховує пошуковий запит.
 
-Використайте `filterItems(foods, query)` функцію щоб фільтрувати список відповідно до пошукового запиту. Щоб перевірити ваші зміни, переконайтеся, що введення "с" в поле введення відфільтрує список до "Суші", та "Дім сум".
+Використайте `filterItems(foods, query)` функцію щоб фільтрувати список відповідно до пошукового запиту. Щоб перевірити ваші зміни, переконайтеся, що введення "с" в поле введення відфільтрує список до "Суші" та "Дім сум".
 
 Зверніть увагу, що `filterItems` вже реалізовано та імпортовано, отже вам не потрібно писати його самостійно!