Челендж: World of Astronomy Додаток

Завдання

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

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

Інструкція

У файлі App.jsx:

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

У файлі Filter.jsx:

1. Отримайте доступ до функцій inputValue та handleInputChange з допомогою хука useContext.

1. To initialize the state use useState hook.
2. For the useEffect hook, include inputValue in the dependency array since the filtration depends on the user's input.
3. To set the data for appData, include planets, inputValue, and handleInputChange.
4. To access inputValue and handleInputChange, use the Context provided as the value for the useContext hook.