From b303365c5720437c7941ed1ceb916a73d419bb09 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Sun, 16 Feb 2025 17:24:43 +0200 Subject: [PATCH 1/9] feat: start translating --- .../learn/sharing-state-between-components.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/content/learn/sharing-state-between-components.md b/src/content/learn/sharing-state-between-components.md index 52eaf28f8..470d045c6 100644 --- a/src/content/learn/sharing-state-between-components.md +++ b/src/content/learn/sharing-state-between-components.md @@ -1,31 +1,31 @@ --- -title: Sharing State Between Components +title: Спільний доступ до стану між компонентами --- -Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as *lifting state up,* and it's one of the most common things you will do writing React code. +Інколи ви хочете, щоб стан двох компонентів завжди змінювався разом. Щоб так зробити, видаліть стан з обох компонентів, перенесіть його до їхнього найближчого спільного батька та потім передайте його вниз до них завдяки пропсам. Це відоме як *підняття стану вгору* і це одна з найпоширеніших речей, які ви будете робити під час написання React коду. -- How to share state between components by lifting it up -- What are controlled and uncontrolled components +- Як поширювати стан між компонент підняттям його вгору +- Що таке контрольовані та не контрольовані компоненти -## Lifting state up by example {/*lifting-state-up-by-example*/} +## Підняття стану на прикладі {/*lifting-state-up-by-example*/} -In this example, a parent `Accordion` component renders two separate `Panel`s: +В цьому прикладі, батьківський `Accordion` компонента рендерить дві окремі `Panel`і: * `Accordion` - `Panel` - `Panel` -Each `Panel` component has a boolean `isActive` state that determines whether its content is visible. +Кожна `Panel` компонента має булевий `isActive` стан, що визначає чи її вміст видимий. -Press the Show button for both panels: +Натисніть кнопку Показати для обох панелей: @@ -41,7 +41,7 @@ function Panel({ title, children }) {

{children}

) : ( )} @@ -51,12 +51,12 @@ function Panel({ title, children }) { export default function Accordion() { return ( <> -

Almaty, Kazakhstan

- - With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. +

Алмати, Казахстан

+ + Із населенням близько 2 мільйонів, Алмати є найбільшим містом в Казахстані. З 1929 по 1997, воно було його столицею. - - The name comes from алма, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple. + + Назва походить від казахського слова алма, що означає "яблуко" і часто перекладалось як "повний яблук". Насправді, регіон що оточує Алмати вважається прабатьківщиною яблука, і дика Malus sieversii вважається ймовірним кандидатом на предка сучасного домашнього яблука. ); From 2a6ed3e0b3d91f546b60f8c267e079d6f2a55f6e Mon Sep 17 00:00:00 2001 From: Dmytro Date: Sun, 16 Feb 2025 21:08:30 +0200 Subject: [PATCH 2/9] feat: translate, part 2 --- .../learn/sharing-state-between-components.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/content/learn/sharing-state-between-components.md b/src/content/learn/sharing-state-between-components.md index 470d045c6..764d65bd4 100644 --- a/src/content/learn/sharing-state-between-components.md +++ b/src/content/learn/sharing-state-between-components.md @@ -4,7 +4,7 @@ title: Спільний доступ до стану між компонента -Інколи ви хочете, щоб стан двох компонентів завжди змінювався разом. Щоб так зробити, видаліть стан з обох компонентів, перенесіть його до їхнього найближчого спільного батька та потім передайте його вниз до них завдяки пропсам. Це відоме як *підняття стану вгору* і це одна з найпоширеніших речей, які ви будете робити під час написання React коду. +Інколи ви хочете, щоб стан двох компонент завжди змінювався разом. Щоб так зробити, видаліть стан з обох компонент, перенесіть його до їхнього найближчого спільного батька та потім передайте його вниз до них завдяки пропсам. Це відоме як *підняття стану вгору* і це одна з найпоширеніших речей, які ви будете робити під час написання React коду. @@ -17,13 +17,13 @@ title: Спільний доступ до стану між компонента ## Підняття стану на прикладі {/*lifting-state-up-by-example*/} -В цьому прикладі, батьківський `Accordion` компонента рендерить дві окремі `Panel`і: +В цьому прикладі, батьківський `Accordion` компонент рендерить дві окремі `Panel`і: * `Accordion` - `Panel` - `Panel` -Кожна `Panel` компонента має булевий `isActive` стан, що визначає чи її вміст видимий. +Кожний `Panel` компонент має булевий `isActive` стан, що визначає чи її вміст видимий. Натисніть кнопку Показати для обох панелей: @@ -73,33 +73,33 @@ h3, p { margin: 5px 0px; } -Notice how pressing one panel's button does not affect the other panel--they are independent. +Зверніть увагу, що натискання кнопки однієї панелі не впливає на іншу панель--вони незалежні. - + -Initially, each `Panel`'s `isActive` state is `false`, so they both appear collapsed +Спочатку стан `isActive` кожної `Panel` дорівнює `false`, тому вони обидві виглядають згорнутими - + -Clicking either `Panel`'s button will only update that `Panel`'s `isActive` state alone +Натискання на будь-яку з кнопок `Panel` призведе до оновлення стану `isActive` тільки цієї `Panel`. -**But now let's say you want to change it so that only one panel is expanded at any given time.** With that design, expanding the second panel should collapse the first one. How would you do that? +**Але тепер припустимо, що ви хочете змінити це так, щоб тільки одна панель була розгорнути в будь-який момент часу.** При такому дизайні, розгортання другої панелі повинно згорнути першу. Як би ви це зробили? -To coordinate these two panels, you need to "lift their state up" to a parent component in three steps: +Щоб скоординувати ці дві панелі, вам потрібно "підняти їхній стан вгору" до батьківського компонента в три кроки: -1. **Remove** state from the child components. -2. **Pass** hardcoded data from the common parent. -3. **Add** state to the common parent and pass it down together with the event handlers. +1. **Видалити** стан із дочірніх компонент. +2. **Передати** незмінні дані від спільного батька. +3. **Додати** стан до спільного батька і передати його вниз разом з обробниками подій. -This will allow the `Accordion` component to coordinate both `Panel`s and only expand one at a time. +Це дозволить компоненту `Accordion`скоординувати обидві `Panel` і розгортати тільки одну на раз. ### Step 1: Remove state from the child components {/*step-1-remove-state-from-the-child-components*/} From 09a3d460370ee997ae537468fe87370078dec8d2 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Sun, 23 Feb 2025 23:50:14 +0200 Subject: [PATCH 3/9] feat: translate, part 3 --- .../learn/sharing-state-between-components.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/content/learn/sharing-state-between-components.md b/src/content/learn/sharing-state-between-components.md index 764d65bd4..c7fb0c5c1 100644 --- a/src/content/learn/sharing-state-between-components.md +++ b/src/content/learn/sharing-state-between-components.md @@ -96,36 +96,36 @@ h3, p { margin: 5px 0px; } Щоб скоординувати ці дві панелі, вам потрібно "підняти їхній стан вгору" до батьківського компонента в три кроки: 1. **Видалити** стан із дочірніх компонент. -2. **Передати** незмінні дані від спільного батька. +2. **Передати** жорсткокодовані дані від спільного батька. 3. **Додати** стан до спільного батька і передати його вниз разом з обробниками подій. Це дозволить компоненту `Accordion`скоординувати обидві `Panel` і розгортати тільки одну на раз. -### Step 1: Remove state from the child components {/*step-1-remove-state-from-the-child-components*/} +### Крок 1: Видаліть стан з дочірніх компонент {/*step-1-remove-state-from-the-child-components*/} -You will give control of the `Panel`'s `isActive` to its parent component. This means that the parent component will pass `isActive` to `Panel` as a prop instead. Start by **removing this line** from the `Panel` component: +Ви передасьте контроль `isActive` до `Panel` батьківського компонента. Це означає що батьківський компоненнт передасть `isActive` до `Panel` як проп. Почніть з **видалення цього рядка** з `Panel` компонента: ```js const [isActive, setIsActive] = useState(false); ``` -And instead, add `isActive` to the `Panel`'s list of props: +Натомість додайте `isActive` до списку пропсів `Panel`: ```js function Panel({ title, children, isActive }) { ``` -Now the `Panel`'s parent component can *control* `isActive` by [passing it down as a prop.](/learn/passing-props-to-a-component) Conversely, the `Panel` component now has *no control* over the value of `isActive`--it's now up to the parent component! +Тепер батьківський компонента `Panel` може *контролювати* `isActive`, [передаючи його як проп.](/learn/passing-props-to-a-component) І навпаки, `Panel` компонент тепер *не має контролю* над значенням `isActive`-- тепер це залежить від батьківського компонента! -### Step 2: Pass hardcoded data from the common parent {/*step-2-pass-hardcoded-data-from-the-common-parent*/} +### Крок 2: Передайте жорсткокодовані дані з батьківського компонента {/*step-2-pass-hardcoded-data-from-the-common-parent*/} -To lift state up, you must locate the closest common parent component of *both* of the child components that you want to coordinate: +Щоб підняти стан вгору, ви повинні виявити найближчий спільний батьківський компонент *обох* дочірніх компонентів, які ви хочете скоординувати: -* `Accordion` *(closest common parent)* +* `Accordion` *(найближчий спільний батько)* - `Panel` - `Panel` -In this example, it's the `Accordion` component. Since it's above both panels and can control their props, it will become the "source of truth" for which panel is currently active. Make the `Accordion` component pass a hardcoded value of `isActive` (for example, `true`) to both panels: +У цьому прикладі, компонент `Accordion`. Оскільки він знаходиться над обогома панелями і може контролювати їхні пропси, це стане "джерелом правди" для визначення, яка панель є відкритою на даний момент. Зробіть так щоб компонент `Accordion` передавав жорсткокодоване значення `isActive` (наприклад, `true`) до обидвох панелей: @@ -135,12 +135,12 @@ import { useState } from 'react'; export default function Accordion() { return ( <> -

Almaty, Kazakhstan

+

Алмати, Казахстан

- With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. + Із населенням близько 2 мільйонів, Алмати є найбільшим містом в Казахстані. З 1929 по 1997, воно було його столицею. - The name comes from алма, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple. + Назва походить від казахського слова алма, що означає "яблуко" і часто перекладалось як "повний яблук". Насправді, регіон що оточує Алмати вважається прабатьківщиною яблука, і дика Malus sieversii вважається ймовірним кандидатом на предка сучасного домашнього яблука. ); @@ -154,7 +154,7 @@ function Panel({ title, children, isActive }) {

{children}

) : ( )} @@ -172,7 +172,7 @@ h3, p { margin: 5px 0px; } -Try editing the hardcoded `isActive` values in the `Accordion` component and see the result on the screen. +Спробуйте відредагувати жорсткокодовані значення `isActive` у компоненті `Accordion` і подивіться на результат на екрані. ### Step 3: Add state to the common parent {/*step-3-add-state-to-the-common-parent*/} From 331490cb7cd914ff06d3cb0f05627c2a48722b4b Mon Sep 17 00:00:00 2001 From: Dmytro Date: Mon, 24 Feb 2025 23:40:37 +0200 Subject: [PATCH 4/9] feat: translate, part 4 --- .../learn/sharing-state-between-components.md | 43 +++++++++---------- 1 file changed, 20 insertions(+), 23 deletions(-) diff --git a/src/content/learn/sharing-state-between-components.md b/src/content/learn/sharing-state-between-components.md index c7fb0c5c1..18bc99e36 100644 --- a/src/content/learn/sharing-state-between-components.md +++ b/src/content/learn/sharing-state-between-components.md @@ -136,10 +136,10 @@ export default function Accordion() { return ( <>

Алмати, Казахстан

- + Із населенням близько 2 мільйонів, Алмати є найбільшим містом в Казахстані. З 1929 по 1997, воно було його столицею. - + Назва походить від казахського слова алма, що означає "яблуко" і часто перекладалось як "повний яблук". Насправді, регіон що оточує Алмати вважається прабатьківщиною яблука, і дика Malus sieversii вважається ймовірним кандидатом на предка сучасного домашнього яблука. @@ -174,19 +174,18 @@ h3, p { margin: 5px 0px; } Спробуйте відредагувати жорсткокодовані значення `isActive` у компоненті `Accordion` і подивіться на результат на екрані. -### Step 3: Add state to the common parent {/*step-3-add-state-to-the-common-parent*/} +### Крок 3: Добавте стан до батьківської компоненти {/*step-3-add-state-to-the-common-parent*/} -Lifting state up often changes the nature of what you're storing as state. +Підйом стану вгору часто змінює природу того, що ви зберігаєте як стан. -In this case, only one panel should be active at a time. This means that the `Accordion` common parent component needs to keep track of *which* panel is the active one. Instead of a `boolean` value, it could use a number as the index of the active `Panel` for the state variable: +В цьому випадку, тільки одна панель має бути актиною одночасно. Це означає що `Accordion` спільний батьківський компонент має відстежувати, *яка* панель є активною. Замість `boolean` значення, омжна використовувати число як індекс активної `Panel` для змінної стану: ```js const [activeIndex, setActiveIndex] = useState(0); ``` +Коли `activeIndex` доорівнює `0`, перша панель буде відкритою і коли це значення дорівнює `1`, активною буде друга. -When the `activeIndex` is `0`, the first panel is active, and when it's `1`, it's the second one. - -Clicking the "Show" button in either `Panel` needs to change the active index in `Accordion`. A `Panel` can't set the `activeIndex` state directly because it's defined inside the `Accordion`. The `Accordion` component needs to *explicitly allow* the `Panel` component to change its state by [passing an event handler down as a prop](/learn/responding-to-events#passing-event-handlers-as-props): +Натискаючи "Показати" кнопку в одній із `Panel` має змінити активний індекс в `Accordion`. `Panel` не може встановлювати `activeIndex` стан безпосередньо, оскільки це визанчається всередині `Accordion`. Компонент `Accordion` повинен *явно дозволити* компоненту `Panel` змінювати свій стан за допомогою [передавання обробника подій вниз як проп](/learn/responding-to-events#passing-event-handlers-as-props): ```js <> @@ -204,8 +203,7 @@ Clicking the "Show" button in either `Panel` needs to change the active index in ``` - -The ` )} @@ -265,20 +263,19 @@ h3, p { margin: 5px 0px; } ``` - -This completes lifting state up! Moving state into the common parent component allowed you to coordinate the two panels. Using the active index instead of two "is shown" flags ensured that only one panel is active at a given time. And passing down the event handler to the child allowed the child to change the parent's state. +Підняття стану вгору завершено! Переміщення стану в спільний батьківський компонент дозволяє вам скоординувати дві панелі. Використовуючи активний індекс замість двох "показано" прапорців гарантує, що тільки одна панель буде активною на даний момент. І передаючи вниз обробник подій до дочірнього компонента дозволить дочірньому компоненту змінювати батьківський стан. - + -Initially, `Accordion`'s `activeIndex` is `0`, so the first `Panel` receives `isActive = true` +Початково, `Accordion` має `activeIndex` із значенням `0`, тому перша `Panel` отримує `isActive = true` - + -When `Accordion`'s `activeIndex` state changes to `1`, the second `Panel` receives `isActive = true` instead +Коли `Accordion` `activeIndex` стан змінюється на `1`, друга `Panel` отримує `isActive = true` замість From 07592c42befe1f3a4ce6b56f691e50a622202fe3 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Tue, 25 Feb 2025 23:31:24 +0200 Subject: [PATCH 5/9] feat: complete translate --- .../learn/sharing-state-between-components.md | 102 +++++++++--------- 1 file changed, 51 insertions(+), 51 deletions(-) diff --git a/src/content/learn/sharing-state-between-components.md b/src/content/learn/sharing-state-between-components.md index 18bc99e36..41df7dfc0 100644 --- a/src/content/learn/sharing-state-between-components.md +++ b/src/content/learn/sharing-state-between-components.md @@ -283,48 +283,48 @@ h3, p { margin: 5px 0px; } -#### Controlled and uncontrolled components {/*controlled-and-uncontrolled-components*/} +#### Контрольовані та неконтрольовані компоненти {/*controlled-and-uncontrolled-components*/} -It is common to call a component with some local state "uncontrolled". For example, the original `Panel` component with an `isActive` state variable is uncontrolled because its parent cannot influence whether the panel is active or not. +Прийнято називати деякий компонент із локальним станом "неконтрольованим". Для прикладу, вихідний `Panel` компонент із `isActive` змінною стану є неконтрольований, оскільки його батько не може впливати на те, чи буде панель активною чи ні. -In contrast, you might say a component is "controlled" when the important information in it is driven by props rather than its own local state. This lets the parent component fully specify its behavior. The final `Panel` component with the `isActive` prop is controlled by the `Accordion` component. +На противагу, ви можете сказати що компонент є "контрольований" коли важлива інформація в ньому керується за допомогою пропсів а не його власним локальним станом. Це дозволяє батьківському компоненту повністю визанчити його поведінку. Останній `Panel` компонент із `isActive` проп є контрольований компонентом `Accordion`. -Uncontrolled components are easier to use within their parents because they require less configuration. But they're less flexible when you want to coordinate them together. Controlled components are maximally flexible, but they require the parent components to fully configure them with props. +Неконтрольовані компоненти легше використовувати із їхніми батьківськими, оскільки вони вимагають менше налаштувань. Але вони менш гнучкі, коли ви хочете скоординувати їх разом. Контрольовані компоненти є максимально гнучкими але вони вимагають від батьківських компонент повністю налаштувати їх за допомогою пропсів. -In practice, "controlled" and "uncontrolled" aren't strict technical terms--each component usually has some mix of both local state and props. However, this is a useful way to talk about how components are designed and what capabilities they offer. +На практиці, "контрольований" та "неконтрольований" не є строгими технічними термінами--кожен компонент, зазвичай має суміш обох, із локальним станом та пропсами. Однак, це корисний спосіб, щоб поговорити як компоненти спроектовані, та які можливості вони пропонують. -When writing a component, consider which information in it should be controlled (via props), and which information should be uncontrolled (via state). But you can always change your mind and refactor later. +Коли пишите компонент, подумайте, яка інформація в ньому має бути контрольованою (за допомогою пропсів), а яка інформація має бути неконтрольована (за допомогою стану). Але завжди можете передумати і покращити це пізніше. -## A single source of truth for each state {/*a-single-source-of-truth-for-each-state*/} +## Єдине джерело правди для кожного стану {/*a-single-source-of-truth-for-each-state*/} -In a React application, many components will have their own state. Some state may "live" close to the leaf components (components at the bottom of the tree) like inputs. Other state may "live" closer to the top of the app. For example, even client-side routing libraries are usually implemented by storing the current route in the React state, and passing it down by props! +В React застосунку, багато компонент матимуть їхній власний стан. Деякий стан може "жити" близько до листкових компонент (компоненти, що знаходяться внизу дерева), для прикладу, поля вводу. Інші стани можуть "жити" ближче до вершини застосунку. Для прикладу, навіть клієнтські бібліотеки маршрутизації зазвичай реалізовані за допомогою зберігання поточного маршруту в React стані та передають його вниз за допомогою пропсів! -**For each unique piece of state, you will choose the component that "owns" it.** This principle is also known as having a ["single source of truth".](https://en.wikipedia.org/wiki/Single_source_of_truth) It doesn't mean that all state lives in one place--but that for _each_ piece of state, there is a _specific_ component that holds that piece of information. Instead of duplicating shared state between components, *lift it up* to their common shared parent, and *pass it down* to the children that need it. +**Для кожної унікальної частинки стану, ви вибирете компонент що "належить" йому.** Цей принцип також відомий як ["єдине джерело правди"](https://en.wikipedia.org/wiki/Single_source_of_truth) Це не означає, що весь стан знаходиться в одному місці--це означає, що для _кожної_ частини стану існує _певний_ компонент, який містить ту частину інформації. Замість дублювання спільного стану між компонентами, *підніміть його вгору* до їхнього спільного батька та *передайте його вниз* до дочірніх компонент, де він потрібний. -Your app will change as you work on it. It is common that you will move state down or back up while you're still figuring out where each piece of the state "lives". This is all part of the process! +Ваш застосунок буде змінюватись в міру того, як ви працюєте над ним. Часто буває так. що ви переміщуєте стан вниз або назад вгору, протягом того, як стараєтесь з'ясувати де кожен шматок стану "живе". Це все частина процесу! -To see what this feels like in practice with a few more components, read [Thinking in React.](/learn/thinking-in-react) +Щоб побачити, як це виглядає на практиці з кількома іншими компонентами, читайте [Мислення в React.](/learn/thinking-in-react) -* When you want to coordinate two components, move their state to their common parent. -* Then pass the information down through props from their common parent. -* Finally, pass the event handlers down so that the children can change the parent's state. -* It's useful to consider components as "controlled" (driven by props) or "uncontrolled" (driven by state). +* Коли ви хочете скоординувати два компоненти, перенесіть їхній стан до їхнього спільного батька. +* Потім передайте інформацію вниз через пропси від їхнього спільного батька. +* Нарешті, передайте обробник подій вниз, щоб діти могли змінювати батьківський стан. +* Корисно розглядати компонент як "контрольований" (керований пропсами) або "неконтрольований" (керований станом). -#### Synced inputs {/*synced-inputs*/} +#### Синхронізовані поля вводу {/*synced-inputs*/} -These two inputs are independent. Make them stay in sync: editing one input should update the other input with the same text, and vice versa. +Ці два поля вводу є незалежні. Зробіть так, щоб вони були синхронізовані: редагування одного поля вводу має оновлювати інше поле вводу із тим самим текстом, і навпаки. -You'll need to lift their state up into the parent component. +Вам потрібно підняти їхній стан вгору до батьківського компонентам. @@ -336,8 +336,8 @@ import { useState } from 'react'; export default function SyncedInputs() { return ( <> - - + + ); } @@ -371,7 +371,7 @@ label { display: block; } -Move the `text` state variable into the parent component along with the `handleChange` handler. Then pass them down as props to both of the `Input` components. This will keep them in sync. +Пересіть змінну стану `text` в батьківський компонент разом із `handleChange` обробником. Потім передайте їх вниз як пропси до обох `Input` компонент. Це забезпечить їхню синхронізацію. @@ -388,12 +388,12 @@ export default function SyncedInputs() { return ( <> @@ -424,17 +424,17 @@ label { display: block; } -#### Filtering a list {/*filtering-a-list*/} +#### Фільтрування списку {/*filtering-a-list*/} -In this example, the `SearchBar` has its own `query` state that controls the text input. Its parent `FilterableList` component displays a `List` of items, but it doesn't take the search query into account. +В цьому прикладі, `SearchBar` має власний `query` стан що контролює текстове поле вводу. Його батьківський `FilterableList` компонент відображає `List` елементів але це не враховує пошуковий запит. -Use the `filterItems(foods, query)` function to filter the list according to the search query. To test your changes, verify that typing "s" into the input filters down the list to "Sushi", "Shish kebab", and "Dim sum". +Використайте `filterItems(foods, query)` функцію щоб фільтрувати список відповідно до пошукового запиту. Щоб перевірити ваші зміни, переконайтеся, що введення "с" в поле введення відфільтрує список до "Суші", та "Дім сум". -Note that `filterItems` is already implemented and imported so you don't need to write it yourself! +Зверніть увагу, що `filterItems` вже реалізовано та імпортовано, отже вам не потрібно писати його самостійно! -You will want to remove the `query` state and the `handleChange` handler from the `SearchBar`, and move them to the `FilterableList`. Then pass them down to `SearchBar` as `query` and `onChange` props. +Вам потрібно видалити стан `query` та `handleChange` обробник з `SearchBar`, та перенести їх до `FilterableList`. Потім передати їх вниз до `SearchBar` як `query` та `onChange` пропси. @@ -463,7 +463,7 @@ function SearchBar() { return ( ``` + Кнопка `