Challenge: Toggle Visibility with State
ã¡ãã¥ãŒã衚瀺ããã«ã¯ã¹ã¯ã€ãããŠãã ãã
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.
ãã¹ãŠæç¢ºã§ãããïŒ
ãã£ãŒãããã¯ããããšãããããŸãïŒ
ã»ã¯ã·ã§ã³Â 1. ç« Â 15
AIã«è³ªåãã
AIã«è³ªåãã
äœã§ã質åããããææ¡ããã質åã®1ã€ã詊ããŠãã£ãããå§ããŠãã ãã