## Implémentez le filtre de couleurs Dans cette étape, vous allez implémenter la fonctionnalité de filtre de couleurs. 1. Ouvrez le fichier `App.js` dans votre éditeur de code. 2. Dans ce fichier, importez les dépendances nécessaires : ```javascript import React, { useState } from "react"; ``` 3. Ajoutez une variable d'état à l'intérieur de `const App = () => {}` pour stocker la liste filtrée de couleurs : ```javascript const [filteredList, setFilteredList] = useState(colors); ``` 4. Implémentez la fonction `handleOnChange` pour filtrer la liste de couleurs en fonction de l'entrée de l'utilisateur : ```javascript const handleOnChange = (e) => { const value = e.target.value; if (!value) { setFilteredList(colors); } const filtered = colors.filter((c) => c.name.toUpperCase().includes(value.toUpperCase()) ); setFilteredList(filtered); }; ``` 5. Affichez le champ d'entrée et la liste filtrée de couleurs : ```javascript return (

{filteredList.map((c) => { return (

{c.name}

); })}

); ``` 6. Le code complet à l'intérieur de `const App = () => {}` est le suivant : ```js const App = () => { const [filteredList, setFilteredList] = useState(colors); const handleOnChange = (e) => { const value = e.target.value; if (!value) { setFilteredList(colors); } const filtered = colors.filter((c) => c.name.toUpperCase().includes(value.toUpperCase()) ); setFilteredList(filtered); }; return (

{filteredList.map((c) => { return (

{c.name}

); })}

); }; ``` 7. Enregistrez le fichier `App.js`, et l'application devrait maintenant filtrer la liste de couleurs en temps réel à mesure que l'utilisateur tape dans le champ d'entrée. ![aperçu du projet](https://file.labex.io/namespace/718bace8-27a3-4200-a588-dde4041ceeb9/react/project-colour-filter/lab-colour-filter/fr/../assets/finished.gif)