Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Créer une Application d'Astronomie Mondiale avec Context | Hooks React et Context pour la Gestion d'État
Maîtrise de React

bookDé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 :

  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 planetsinputValue et handleInputChange.
  4. Pour accéder à inputValue et handleInputChange, utiliser le Context fourni comme valeur pour le hook useContext.
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 12

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

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

bookDé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 :

  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 planetsinputValue et handleInputChange.
  4. Pour accéder à inputValue et handleInputChange, utiliser le Context fourni comme valeur pour le hook useContext.
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 12
some-alt