Завдання

У цьому завданні ви продовжите роботу над тим самим додатком, додаючи функцію фільтрації, яка дозволяє користувачам фільтрувати планети за назвою.

Щоб створити компонент фільтрації, потрібно створити форму, яка зберігає стан значення поля вводу. Додатково потрібна функція, яка реагуватиме на зміни значення у полі вводу.

Інструкції

У файлі App.jsx:

1. Ініціалізуйте стан для значення поля вводу за допомогою хука useState. Встановіть початкове значення як порожній рядок ("").
2. У хуку useEffect перевірте логіку, яка буде фільтрувати дані при зміні поля вводу користувачем. Визначте, що має бути включено до масиву залежностей хука useEffect, щоб він виконувався у потрібний момент.
3. Заповніть змінну appData коректними даними. Змінна appData представляє об'єкт context, і вам потрібно включити inputValue та handleInputChange для компонента Filter.

У файлі Filter.jsx: Отримайте доступ до inputValue та функції handleInputChange за допомогою хука useContext.

1. Для ініціалізації стану використовуйте хук useState.
2. Для хука useEffect додайте inputValue до масиву залежностей, оскільки фільтрація залежить від введення користувача.
3. Щоб встановити дані для appData, включіть planets, inputValue та handleInputChange.
4. Для доступу до inputValue та handleInputChange використовуйте Context, який передається як значення для хука useContext.