Défi : Basculer la Visibilité avec useState
Tâche
Créer un composant comprenant un bouton et un paragraphe de texte. Implémenter la logique nécessaire en utilisant le hook useState
afin d’alterner la visibilité du paragraphe de texte lors du clic sur le bouton.
Instructions
- Importer le hook
useState
depuis la bibliothèque React. - Déclarer une variable d’état nommée
isVisible
à l’aide du hookuseState
. L’initialiser avec la valeurfalse
. - Implémenter une fonction nommée
toggleVisibility
qui, lorsqu’elle est appelée, alterne l’étatisVisible
entretrue
etfalse
. - Utiliser la fonction
toggleVisibility
comme gestionnaireonClick
pour le bouton.
- Inclure une instruction
import
pour importer le hook approprié depuis la bibliothèque React. - Pour cette tâche, le hook
useState
sera utilisé car il permet de gérer l’état de visibilité du paragraphe. - Pour déterminer le nom de variable approprié pour l’état, observer la fonction associée à la modification de l’état, qui est
setIsVisible
. Retirer le préfixe "set" et utiliser une première lettre en minuscule pour le nom de la variable, qui doit êtreisVisible
. - Pour invoquer la fonction
toggleVisibility
lorsqu’un clic est effectué sur le bouton, l’assigner comme valeur de l’attributonClick
du bouton.
Tout était clair ?
Merci pour vos commentaires !
Section 3. Chapitre 3
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 : Basculer la Visibilité avec useState
Glissez pour afficher le menu
Tâche
Créer un composant comprenant un bouton et un paragraphe de texte. Implémenter la logique nécessaire en utilisant le hook useState
afin d’alterner la visibilité du paragraphe de texte lors du clic sur le bouton.
Instructions
- Importer le hook
useState
depuis la bibliothèque React. - Déclarer une variable d’état nommée
isVisible
à l’aide du hookuseState
. L’initialiser avec la valeurfalse
. - Implémenter une fonction nommée
toggleVisibility
qui, lorsqu’elle est appelée, alterne l’étatisVisible
entretrue
etfalse
. - Utiliser la fonction
toggleVisibility
comme gestionnaireonClick
pour le bouton.
- Inclure une instruction
import
pour importer le hook approprié depuis la bibliothèque React. - Pour cette tâche, le hook
useState
sera utilisé car il permet de gérer l’état de visibilité du paragraphe. - Pour déterminer le nom de variable approprié pour l’état, observer la fonction associée à la modification de l’état, qui est
setIsVisible
. Retirer le préfixe "set" et utiliser une première lettre en minuscule pour le nom de la variable, qui doit êtreisVisible
. - Pour invoquer la fonction
toggleVisibility
lorsqu’un clic est effectué sur le bouton, l’assigner comme valeur de l’attributonClick
du bouton.
Tout était clair ?
Merci pour vos commentaires !
Section 3. Chapitre 3