Toggle Visibility

Easy

Toggle Visibility

Easy

In this exercise, you're tasked with creating a component that toggles the visibility of a piece of text when a button is clicked. Expectations:

Initially, the text should be hidden
When the button is clicked, the text should become visible if it was hidden, and hidden if it was visible
Use the useState
hook to manage the visibility state

Upgrade

Console

Submit

Solution

00:00

Solution Walkthrough for Toggle Visibility

Spoiler Alert!

Don't read this unless you've already solved the problem.

Key ReactJS Concepts:

Conditional Rendering:

React allows you to conditionally render elements based on a certain condition. In this exercise, we'll use conditional rendering to display or hide the text element based on the visibility state.

Event Handling:

React supports various event handlers, such as onClick
, which allows you to execute a function when an element is clicked. In this exercise, we'll use the onClick
event handler to toggle the visibility state when the button is clicked.

Solution Walkthrough:

Initialize state variable isVisible
with false
:

We create a state variable isVisible
using the useState
hook and set its initial value to false
, indicating that the text should be initially hidden.

const [isVisible, setIsVisible] = useState(false);

Create the handleToggleVisibility
function:

We create a new function called handleToggleVisibility
that toggles the isVisible
state variable by setting it to its opposite value (!isVisible
).

function handleToggleVisibility() {
  setIsVisible(!isVisible);
}

Attach the handleToggleVisibility
function to the button's onClick
event handler:

We connect the handleToggleVisibility
function to the onClick
event handler of the button. This ensures that the function is called every time the button is clicked, toggling the visibility of the text element.

<button onClick={handleToggleVisibility}>Show/Hide Text</button>

Conditionally render the text element based on the isVisible
state:

We use conditional rendering to display the text element only if the isVisible
state is true
.

{isVisible && <p>Toggle me!</p>}

Back to Exercises