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
useStatehook 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 beisVisible. - To invoke the
toggleVisibilityfunction when the button is clicked, assign it as the value for theonClickattribute of the button.
Everything was clear?
Thanks for your feedback!
Section 1. Chapter 15
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Section 1. Chapter 15