Tâche

Dans cette tâche, vous continuerez à travailler sur la même application, en ajoutant une fonctionnalité de filtrage qui permet aux utilisateurs de filtrer les planètes par nom.

Pour créer le composant de filtrage, nous devons créer un formulaire qui maintient l'état de la valeur d'entrée. De plus, nous avons besoin d'une fonction qui répondra aux changements de la valeur d'entrée.

Instructions

Dans le App.jsx :

1. Initialisez l'état pour la valeur d'entrée en utilisant le hook useState . Définissez la valeur initiale sur une chaîne vide ( "" ).

2. Dans le hook useEffect , vérifiez la logique qui filtrera les données lorsque l'utilisateur modifie le champ d'entrée. Décidez de ce qui doit être inclus dans le tableau de dépendances du hook useEffect pour s'assurer qu'il s'exécute lorsque cela est nécessaire.

3. Remplissez la variable appData avec les données correctes. La variable appData représente l'objet context , et vous devez inclure inputValue et handleInputChange pour le composant Filter .

Dans le Filter.jsx : Accédez aux fonctions inputValue et handleInputChange en utilisant le hook useContext.

1. Pour initialiser l'état, utilisez le hook useState .

2. Pour le hook useEffect , incluez inputValue dans le tableau de dépendances puisque le filtrage dépend de l'entrée de l'utilisateur.

3. Pour définir les données pour appData , incluez planets , inputValue , et handleInputChange .

4. Pour accéder à inputValue et handleInputChange , utilisez le Context fourni comme valeur pour le hook useContext .