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
course content

Course Content

Mastering React

Mastering React

1. Introduction to React Fundamentals
2. Styling in React Apps
3. React Hooks and Context
4. React in the Real World

Challenge: 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
We're sorry to hear that something went wrong. What happened?
some-alt