Challenge: Toggle Visibility with State
Swipe to show menu
Task
Create a component that includes a button and a text paragraph. Implement the necessary logic using the useState hook to toggle the visibility of the text paragraph when the button is clicked.
Instructions
- Import the
useStatehook from the React library. - Declare a state variable named
isVisibleusing theuseStatehook. Initialize it with the valuefalse. - Implement a function named
toggleVisibilitythat, when called, toggles theisVisiblestate betweentrueandfalse. - Use the
toggleVisibilityfunction as theonClickhandler for the button.
- Include an
importstatement to import the appropriate hook from the React library. - For this task, we will utilize theย
useStateย hook as we are managing the state of paragraph visibility. - To determine the appropriate variable name for the state, observe the function associated with setting the state, which isย
setIsVisible. Remove the "set" prefix and use a lowercase first letter for the variable name, which should beยisVisible. - To invoke theย
toggleVisibilityย function when the button is clicked, assign it as the value for theยonClickย attribute of the button.
Everything was clear?
Thanks for your feedback!
Sectionย 3. Chapterย 2
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Sectionย 3. Chapterย 2