Tâche

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

Pour créer le composant de filtrage, il est nécessaire de créer un formulaire qui maintient l’état de la valeur de l’entrée. De plus, une fonction est requise pour réagir aux changements de la valeur de l’entrée.

Instructions

Dans le App.jsx :

1. Initialiser l’état pour la valeur de l’entrée en utilisant le hook useState. Définir la valeur initiale sur une chaîne vide ("").
2. Dans le hook useEffect, vérifier la logique qui filtrera les données lorsque l’utilisateur modifie le champ de saisie. Déterminer ce qui doit être inclus dans le tableau de dépendances du hook useEffect afin de garantir son exécution lorsque cela est nécessaire.
3. Renseigner la variable appData avec les données appropriées. La variable appData représente l’objet context, et il est nécessaire d’inclure inputValue et handleInputChange pour le composant Filter.

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

1. Pour initialiser l’état, utiliser le hook useState.
2. Pour le hook useEffect, inclure inputValue dans le tableau de dépendances puisque le filtrage dépend de la saisie de l’utilisateur.
3. Pour définir les données de appData, inclure planets, inputValue et handleInputChange.
4. Pour accéder à inputValue et handleInputChange, utiliser le Context fourni comme valeur pour le hook useContext.