Зміст курсу
Опановуємо 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
).
Дякуємо за ваш відгук!