Défi : Créer une Application d'Astronomie Mondiale avec Context
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
:
- 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 (""
). - 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 hookuseEffect
afin de garantir son exécution lorsque cela est nécessaire. - Renseigner la variable
appData
avec les données appropriées. La variableappData
représente l’objetcontext
, et il est nécessaire d’inclureinputValue
ethandleInputChange
pour le composantFilter
.
Dans le Filter.jsx
:
Accéder à inputValue
et aux fonctions handleInputChange
en utilisant le hook useContext
.
- Pour initialiser l’état, utiliser le hook
useState
. - Pour le hook
useEffect
, inclureinputValue
dans le tableau de dépendances puisque le filtrage dépend de la saisie de l’utilisateur. - Pour définir les données de
appData
, inclureplanets
,inputValue
ethandleInputChange
. - Pour accéder à
inputValue
ethandleInputChange
, utiliser leContext
fourni comme valeur pour le hookuseContext
.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.17
Défi : Créer une Application d'Astronomie Mondiale avec Context
Glissez pour afficher le menu
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
:
- 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 (""
). - 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 hookuseEffect
afin de garantir son exécution lorsque cela est nécessaire. - Renseigner la variable
appData
avec les données appropriées. La variableappData
représente l’objetcontext
, et il est nécessaire d’inclureinputValue
ethandleInputChange
pour le composantFilter
.
Dans le Filter.jsx
:
Accéder à inputValue
et aux fonctions handleInputChange
en utilisant le hook useContext
.
- Pour initialiser l’état, utiliser le hook
useState
. - Pour le hook
useEffect
, inclureinputValue
dans le tableau de dépendances puisque le filtrage dépend de la saisie de l’utilisateur. - Pour définir les données de
appData
, inclureplanets
,inputValue
ethandleInputChange
. - Pour accéder à
inputValue
ethandleInputChange
, utiliser leContext
fourni comme valeur pour le hookuseContext
.
Merci pour vos commentaires !