Exercise: Reveal or Hide

Inside the directory you created for this course on React, create a new folder called Exercise-3-Reveal-or-Hide and put the .js solution files for this exercise within it.

We'll start off with laying out the initial JSX in the App component and then think about how to take the program beyond that point.

Here's our App component's initial definition:

function App() {
   return (
      <div>
         <button>Show</button>
         <p style={{ display: 'none' }}>This is some text</p>
      </div>
   );
}

It's almost the same code that we saw above, except for the appropriate normalization given to the style prop in the JSX.

Alright, let's now take a pause and think about how to implement this visibility toggler program.

One thing that's crystal clear is that we need a click event handler on the <button>. This click handler would...What would it do?

Well, the click handler would change the button's text and the paragraph's display style.

Hmm. Something is changing.

This means that because these things are changing in the app, we need to make them part of the app's state. Let's call the text inside the button as the buttonText state. Similarly, let's call the current value of the display property as the displayValue state.

Initially, buttonText is 'Show' whereas displayValue is 'none'.

Here's how our App component looks after the inclusion of these state values:

import { useState } from 'react';

function App() {
   const [buttonText, setButtonText] = useState('Show');
   const [displayValue, setDisplayValue] = useState('none')

   return (
      <div>
         <button>{buttonText}</button>
         <p style={{ display: displayValue }}>This is some text</p>
      </div>
   );
}

Now, let's also add a click event handler on the button. We'll call the handler function toggleVisibility(), clearly describing its purpose:

import { useState } from 'react';

function App() {
   const [buttonText, setButtonText] = useState('Show');
   const [displayValue, setDisplayValue] = useState('none')
   
   function toggleVisibility() {
      // Code to go here
   }

   return (
      <div>
         <button onClick={toggleVisibility}>{buttonText}</button>
         <p style={{ display: displayValue }}>This is some text</p>
      </div>
   );
}

So far, so good.

Now, all what's left is inside toggleVisibility(). Let's get that done too.

Fortunately, it's really really simple. When toggleVisibility() is called, we need to check the current value of buttonText and, if it's 'Show', set it to 'Hide', or else set it to 'Show'.

So is the case with displayValue — if it's 'none', we need to set it to 'block', or else set it to 'none'.

Time to implement this in the code:

import { useState } from 'react';

function App() {
   const [buttonText, setButtonText] = useState('Show');
   const [displayValue, setDisplayValue] = useState('none')
   
   function toggleVisibility() {
      setButtonText(buttonText === 'Show' ? 'Hide' : 'Show');
      setDisplayValue(displayValue === 'none' ? 'block' : 'none');
   }

   return (
      <div>
         <button onClick={toggleVisibility}>{buttonText}</button>
         <p style={{ display: displayValue }}>This is some text</p>
      </div>
   );
}

Everything looks perfect, so let's go on and try this code in the browser to see if everything works perfectly as well.

Live Example

Yup, it looks stunning.

And this completes this exercise.

So what do you say, was it easy or difficult?