Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Челендж: Фільтрація Списку Автомобілів | React Хуки та Контекст
Опановуємо React
course content

Зміст курсу

Опановуємо React

Опановуємо React

4. React в Реальному Світі

Челендж: Фільтрація Списку Автомобілів

Завдання

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

Інструкції

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

Все було зрозуміло?

Секція 3. Розділ 9
We're sorry to hear that something went wrong. What happened?
some-alt