Défi : Filtrage de la Liste de Voitures

Tâche

Créez le composant CarList responsable de l'affichage d'une liste de voitures et fournissant une fonctionnalité de recherche pour les filtrer en fonction de leurs noms. Il permet aux utilisateurs de saisir un terme de recherche et filtre dynamiquement la liste des voitures en fonction de cette entrée.

Instructions

1. Importez les hooks nécessaires de la bibliothèque React.
2. À l'intérieur du composant CarList, déclarez une variable d'état searchInput et une fonction de mise à jour d'état setSearchInput en utilisant le hook useState. Initialisez searchInput avec une chaîne vide.
3. Utilisez le hook useMemo pour mémoriser le tableau filteredCars. La logique de mémorisation doit filtrer les voitures en fonction de searchInput. Si searchInput est vide, retournez toutes les voitures ; sinon, filtrez les voitures en fonction de l'entrée de recherche.
4. Dans le tableau de dépendances de useMemo, spécifiez les variables correctes dont dépend la fonction mémorisée.

1. Incluez une instruction import pour importer le hook nécessaire de la bibliothèque React.
2. Utilisez le hook useState pour déclarer une variable d'état et sa fonction de mise à jour.
3. Le hook useMemo mémorise le tableau de voitures filtrées, évitant ainsi des recalculs inutiles.
4. Dans le tableau de dépendances de useMemo, incluez les variables dont dépend la fonction mémorisée (cars et searchInput).