fix: apply suggestions from code review

Author: Dmytrii248

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

@@ -1,31 +1,31 @@
 ---
-title: Спільний доступ до стану між компонентами
+title: Поширення стану між компонентами
 ---
 
 <Intro>
 
-Іноді вам потрібно, щоб стан двох компонент завжди змінювався разом. Щоб так зробити, видаліть стан з обох компонент, перенесіть його до їхнього найближчого спільного батька та потім передайте стан вниз до них завдяки пропсам. Це відоме як *підняття стану вгору* і це одна з найпоширеніших речей, які ви будете робити під час написання React коду.  
+Іноді вам потрібно, щоб стан двох компонентів завжди змінювався разом. Для цього видаліть стан з обох компонентів, перенесіть його до їхнього найближчого спільного батьківського компонента і потім передайте вниз до них через пропси. Це називається *підняттям стану вгору (lifting state up)*, і це одна з найпоширеніших речей, які ви будете робити під час написання React-коду.
 
 </Intro>
 
 <YouWillLearn>
 
-- Як поширювати стан між компонент підняттям його вгору
-- Що таке контрольовані та не контрольовані компоненти
+- Як поширювати стан між компонентами підняттям його вгору
+- Що таке контрольовані та неконтрольовані компоненти
 
 </YouWillLearn>
 
 ## Підняття стану на прикладі {/*lifting-state-up-by-example*/}
 
-В цьому прикладі, батьківський компонент `Accordion` рендерить дві окремі `Panel`:
+У цьому прикладі батьківський компонент `Accordion` рендерить два окремих компонента-панелі `Panel`:
 
 * `Accordion`
   - `Panel`
   - `Panel`
 
-Кожний `Panel` компонент має булевий `isActive` стан, що визначає чи його вміст видимий. 
+Кожний компонент `Panel` має булевий стан `isActive`, який визначає, чи його вміст видимий.
 
-Натисніть кнопку Показати для обох панелей: 
+Натисніть кнопку "Показати" для обох панелей: 
 
 <Sandpack>
 
@@ -53,10 +53,10 @@ export default function Accordion() {
     <>
       <h2>Алмати, Казахстан</h2>
       <Panel title="Про Алмати">
-        Із населенням близько 2 мільйонів, Алмати є найбільшим містом в Казахстані. З 1929 по 1997, воно було його столицею.
+        З майже 2-мільйонним населеннм Алмати є найбільшим містом в Казахстані. З 1929 до 1997 воно було його столицею.
       </Panel>
       <Panel title="Етимологія">
-        Назва походить від казахського слова <span lang="kk-KZ">алма</span>, що означає "яблуко" і часто перекладалось як "повний яблук". Насправді, регіон що оточує Алмати вважається прабатьківщиною яблука, і дика <i lang="la">Malus sieversii</i> вважається ймовірним кандидатом на предка сучасного домашнього яблука.
+        Назва походить від казахського слова <span lang="kk-KZ">алма</span>, що означає "яблуко" і часто перекладалось як "повний яблук". Насправді регіон, який оточує Алмати вважається прабатьківщиною яблука, а дика <i lang="la">Malus sieversii</i> - ймовірним кандидатом на предка сучасного домашнього яблука.
       </Panel>
     </>
   );
@@ -73,37 +73,37 @@ h3, p { margin: 5px 0px; }
 
 </Sandpack>
 
-Зверніть увагу, що натискання кнопки однієї панелі не впливає на іншу панель--вони незалежні.
+Зверніть увагу, що натискання кнопки однієї панелі не впливає на іншу панель -- вони незалежні.
 
 <DiagramGroup>
 
-<Diagram name="sharing_state_child" height={367} width={477} alt="Діаграма показує дерево з трьох компонент, один батько з назвою Accordion і два дочірні компоненти з назвами Panel. Обидва компоненти Panel містять isActive зі значенням false.">
+<Diagram name="sharing_state_child" height={367} width={477} alt="Діаграма показує дерево з трьох компонентів, один батьківський із міткою Accordion і два дочірні з мітками Panel. Обидва компоненти Panel містять isActive зі значенням false.">
 
-Спочатку стан `isActive` кожної `Panel` дорівнює `false`, тому вони обидві виглядають згорнутими
+Спочатку стан `isActive` кожного `Panel` дорівнює `false`, тому обидва мають згорнутий вигляд
 
 </Diagram>
 
-<Diagram name="sharing_state_child_clicked" height={367} width={480} alt="Та сама діаграма, що й попередня, з виділеним isActive першого дочірнього компонента Panel, що вказує на клік зі значенням isActive, встановленим у true. Другий компонент Panel все ще містить значення false." >
+<Diagram name="sharing_state_child_clicked" height={367} width={480} alt="Та сама діаграма, що й попередня, з виділеним isActive першого дочірнього компонента Panel, що вказує на натискання зі значенням isActive, встановленим у true. Другий компонент Panel все ще містить значення false." >
 
-Натискання на будь-яку з кнопок `Panel` призведе до оновлення стану `isActive` тільки цієї `Panel`.
+Натискання на будь-яку з кнопок `Panel` призведе до оновлення стану `isActive` тільки цієї `Panel`
 
 </Diagram>
 
 </DiagramGroup>
 
-**Але тепер припустимо, що ви хочете змінити це так, щоб тільки одна панель була розгорнути в будь-який момент часу.** При такому дизайні, розгортання другої панелі повинно згорнути першу. Як би ви це зробили?
+**Але тепер припустимо, що ви хочете змінити це так, щоб тільки одна панель була розгорнута в будь-який момент часу.** За цього дизайну розгортання другої панелі повинно згорнути першу. Як би ви це зробили?
 
 Щоб скоординувати ці дві панелі, вам потрібно "підняти їхній стан вгору" до батьківського компонента в три кроки:
 
-1. **Видалити** стан із дочірніх компонент.
-2. **Передати** жорсткокодовані дані від спільного батька.
+1. **Видалити** стан із дочірніх компонентів.
+2. **Передати** незмінні дані від спільного батьківського компонента.
 3. **Додати** стан до спільного батька і передати його вниз разом з обробниками подій.
 
-Це дозволить компоненту `Accordion`скоординувати обидві `Panel` та розгортати тільки одну на раз.
+Це дасть компоненту `Accordion` змогу скоординувати обидва компоненти `Panel` та розгортати тільки один щоразу.
 
-### Крок 1: Видаліть стан з дочірніх компонент {/*step-1-remove-state-from-the-child-components*/}
+### Крок 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*/}
+### Крок 2: Передайте незмінні дані від спільного батьківського компонента {/*step-2-pass-hardcoded-data-from-the-common-parent*/}
 
-Щоб підняти стан вгору, ви повинні виявити найближчий спільний батьківський компонент *обох* дочірніх компонент, які ви хочете скоординувати:
+Щоб підняти стан вгору, ви повинні виявити найближчий спільний батьківський компонент *обох* дочірніх компонентів, які ви хочете скоординувати:
 
 * `Accordion` *(найближчий спільний батько)*
   - `Panel`
   - `Panel`
 
-У цьому прикладі, компонент `Accordion`. Оскільки він знаходиться над обома панелями і може контролювати їхні пропси, це стане "джерелом правди" для визначення, яка панель є відкритою на даний момент. Зробіть так щоб компонент `Accordion` передавав жорсткокодоване значення `isActive` (наприклад, `true`) до обидвох панелей:
+У цьому прикладі ним є компонент `Accordion`. Оскільки він знаходиться над обома панелями і може контролювати їхні пропси, він стане "джерелом правди" для визначення того, яка панель є наразі відкритою. Зробіть так, щоб компонент `Accordion` передавав незмінне значення `isActive` (наприклад, `true`) до обох панелей:
 
 <Sandpack>
 
@@ -135,12 +135,12 @@ import { useState } from 'react';
 export default function Accordion() {
   return (
     <>
-    <h2>Алмати, Казахстан</h2>
+      <h2>Алмати, Казахстан</h2>
       <Panel title="Про Алмати" isActive={true}>
-        Із населенням близько 2 мільйонів, Алмати є найбільшим містом в Казахстані. З 1929 по 1997, воно було його столицею.
+        З майже 2-мільйонним населеннм Алмати є найбільшим містом в Казахстані. З 1929 до 1997 воно було його столицею.
       </Panel>
       <Panel title="Етимологія" isActive={true}>
-        Назва походить від казахського слова <span lang="kk-KZ">алма</span>, що означає "яблуко" і часто перекладалось як "повний яблук". Насправді, регіон що оточує Алмати вважається прабатьківщиною яблука, і дика <i lang="la">Malus sieversii</i> вважається ймовірним кандидатом на предка сучасного домашнього яблука.
+        Назва походить від казахського слова <span lang="kk-KZ">алма</span>, що означає "яблуко" і часто перекладалось як "повний яблук". Насправді регіон, який оточує Алмати вважається прабатьківщиною яблука, а дика <i lang="la">Malus sieversii</i> - ймовірним кандидатом на предка сучасного домашнього яблука.
       </Panel>
     </>
   );
@@ -183,6 +183,7 @@ h3, p { margin: 5px 0px; }
 ```js
 const [activeIndex, setActiveIndex] = useState(0);
 ```
+
 Коли `activeIndex` доорівнює `0`, перша панель буде відкритою і коли це значення дорівнює `1`, активною буде друга.
 
 Натискаючи "Показати" кнопку в одній із `Panel` має змінити активний індекс в `Accordion`. `Panel` не може встановлювати `activeIndex` стан безпосередньо, оскільки це визанчається всередині `Accordion`. Компонент `Accordion` повинен *явно дозволити* компоненту `Panel` змінювати свій стан за допомогою [передавання обробника подій вниз як проп](/learn/responding-to-events#passing-event-handlers-as-props):
@@ -203,6 +204,7 @@ const [activeIndex, setActiveIndex] = useState(0);
   </Panel>
 </>
 ```
+
 Кнопка `<button>` всередині `Panel` тепер буде використовувати `onShow` проп як обробник події кліку:
 
 <Sandpack>
@@ -214,20 +216,20 @@ export default function Accordion() {
   const [activeIndex, setActiveIndex] = useState(0);
   return (
     <>
-    <h2>Алмати, Казахстан</h2>
+      <h2>Алмати, Казахстан</h2>
        <Panel
         title="Про Алмати"
         isActive={activeIndex === 0}
         onShow={() => setActiveIndex(0)}
       >
-        Із населенням близько 2 мільйонів, Алмати є найбільшим містом в Казахстані. З 1929 по 1997, воно було його столицею.
+        З майже 2-мільйонним населеннм Алмати є найбільшим містом в Казахстані. З 1929 до 1997 воно було його столицею.
       </Panel>
       <Panel
         title="Етимологія"
         isActive={activeIndex === 1}
         onShow={() => setActiveIndex(1)}
       >
-        Назва походить від казахського слова <span lang="kk-KZ">алма</span>, що означає "яблуко" і часто перекладалось як "повний яблук". Насправді, регіон що оточує Алмати вважається прабатьківщиною яблука, і дика <i lang="la">Malus sieversii</i> вважається ймовірним кандидатом на предка сучасного домашнього яблука.
+        Назва походить від казахського слова <span lang="kk-KZ">алма</span>, що означає "яблуко" і часто перекладалось як "повний яблук". Насправді регіон, який оточує Алмати вважається прабатьківщиною яблука, а дика <i lang="la">Malus sieversii</i> - ймовірним кандидатом на предка сучасного домашнього яблука.
       </Panel>
     </>
   );

src/sidebarLearn.json

@@ -147,7 +147,7 @@
           "path": "/learn/choosing-the-state-structure"
         },
         {
-          "title": "Sharing State Between Components",
+          "title": "Поширення стану між компонентами",
           "path": "/learn/sharing-state-between-components"
         },
         {