Contenu du cours
Maîtrise de React
Maîtrise de React
Défi : Basculer la Visibilité
Tâche
Créez un composant qui inclut un bouton et un paragraphe de texte. Implémentez la logique nécessaire en utilisant le hook useState
pour basculer la visibilité du paragraphe de texte lorsque le bouton est cliqué.
Instructions
Importez le hook
useState
de la bibliothèque React.Déclarez une variable d'état nommée
isVisible
en utilisant le hookuseState
. Initialisez-la avec la valeurfalse
.Implémentez une fonction nommée
toggleVisibility
qui, lorsqu'elle est appelée, bascule l'étatisVisible
entretrue
etfalse
.Utilisez la fonction
toggleVisibility
comme gestionnaireonClick
pour le bouton.
Incluez une déclaration
import
pour importer le hook approprié de la bibliothèque React.Pour cette tâche, nous utiliserons le hook
useState
car nous gérons l'état de la visibilité du paragraphe.Pour déterminer le nom de variable approprié pour l'état, observez la fonction associée à la définition de l'état, qui est
setIsVisible
. Supprimez le préfixe "set" et utilisez une première lettre minuscule pour le nom de la variable, qui devrait êtreisVisible
.Pour invoquer la fonction
toggleVisibility
lorsque le bouton est cliqué, assignez-la comme valeur pour l'attributonClick
du bouton.
Merci pour vos commentaires !