Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge: Car List Filtering | React Hooks and Context
Mastering React

Challenge: Car List FilteringChallenge: Car List Filtering

Task

Create the CarList component responsible for rendering a list of cars and providing a search functionality to filter them based on their names. It allows users to enter a search term and dynamically filters the list of cars based on that input.

Instructions

  1. Import the necessary hooks from the React library.
  2. Inside the CarList component, declare a state variable searchInput and a state updater function setSearchInput using the useState hook. Initialize searchInput with an empty string.
  3. Use the useMemo hook to memoize the filteredCars array. The memoization logic should filter the cars based on the searchInput. If searchInput is empty, return all cars; otherwise, filter the cars based on the search input.
  4. In the useMemo dependency array, specify the correct variables the memoized function depends on.
  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).

Everything was clear?

Section 3. Chapter 9
course content

Course Content

Mastering React

Challenge: Car List FilteringChallenge: Car List Filtering

Task

Create the CarList component responsible for rendering a list of cars and providing a search functionality to filter them based on their names. It allows users to enter a search term and dynamically filters the list of cars based on that input.

Instructions

  1. Import the necessary hooks from the React library.
  2. Inside the CarList component, declare a state variable searchInput and a state updater function setSearchInput using the useState hook. Initialize searchInput with an empty string.
  3. Use the useMemo hook to memoize the filteredCars array. The memoization logic should filter the cars based on the searchInput. If searchInput is empty, return all cars; otherwise, filter the cars based on the search input.
  4. In the useMemo dependency array, specify the correct variables the memoized function depends on.
  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).

Everything was clear?

Section 3. Chapter 9
some-alt