Course Content
React Mastery
React Mastery
Challenge: Toggling Visibility
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
useState
hook from the React library. - Declare a state variable named
isVisible
using theuseState
hook. Initialize it with the valuefalse
. - Implement a function named
toggleVisibility
that, when called, toggles theisVisible
state betweentrue
andfalse
. - Use the
toggleVisibility
function as theonClick
handler for the button.
- Include an
import
statement 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 beisVisible
. - To invoke the
toggleVisibility
function when the button is clicked, assign it as the value for theonClick
attribute of the button.
Thanks for your feedback!