Course Content
Mastering React
Mastering React
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
- Import the necessary hooks from the React library.
- Inside the
CarList
component, declare a state variablesearchInput
and a state updater functionsetSearchInput
using theuseState
hook. InitializesearchInput
with an empty string. - Use the
useMemo
hook to memoize thefilteredCars
array. The memoization logic should filter the cars based on thesearchInput
. IfsearchInput
is empty, return all cars; otherwise, filter the cars based on the search input. - In the
useMemo
dependency array, specify the correct variables the memoized function depends on.
- 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
).
Everything was clear?