Зміст курсу
Опановуємо React
Опановуємо React
Челендж: Фільтрація Списку Автомобілів
Завдання
Створити компонент CarList
, який відповідає за відображення списку автомобілів і надає функцію пошуку для їх фільтрації на основі назв. Він дозволяє користувачам вводити пошуковий термін і динамічно фільтрує список автомобілів на основі цього введення.
Інструкції
- Імпортуйте необхідні хуки з бібліотеки React.
- Усередині компонента
CarList
оголосіть змінну стануsearchInput
та функцію оновлення стануsetSearchInput
за допомогою хукаuseState
. ІніціалізуйтеsearchInput
порожнім рядком. - Використовуйте хук
useMemo
для запам'ятовування масивуfilteredCars
. Логіка запам'ятовування повинна фільтрувати автомобілі на основіsearchInput
. ЯкщоsearchInput
порожній, повернути всі автомобілі, інакше відфільтрувати автомобілі на основі пошукового запиту. - У масиві залежностей
useMemo
вкажіть правильні змінні, від яких залежить функція, що запам'ятовується.
- Include an
import
statement to import the necessary hook from the React library. - Use the
useState
hook to declare a state variable and its updater function. - The
useMemo
hook memoizes the filtered cars array, preventing unnecessary recalculations. - In the dependency array of
useMemo
, include the variables that the memoized function depends on (cars
andsearchInput
).
Дякуємо за ваш відгук!