Objective
Recreate the program created in the previous Reveal or Hide exercise using just one state value, and that a Boolean.
Description
In one of the preceding exercises, namely Reveal or Hide, we implemented a visibility toggler program using React.
Here's a recap of that program:
Clicking the button toggles the text of the button between 'Show' and 'Hide', and the display style property of the paragraph between none and block.
In the exercise, we used two state values:
buttonText, holding the text to be placed inside the button.displayValue, holding the value to be provided to thedisplaystyle property of the paragraph.
In this exericse, you have to re-implement this visibility toggling program but using just one state value which must be a Boolean.
Keep in mind that you're not supposed to use more than one state value, and that state value shouldn't be of any type other than a Boolean (true or false).
New file
Inside the directory you created for this course on React, create a new folder called Exercise-5-Reveal-or-Hide-Again and put the .js solution files for this exercise within it.
Solution
Here's the code from the previous exercise:
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>
);
}For this exercise, we just have to make a couple of alterations here and we'll be done.
Yes, it's that simple. Let's get to work.
If we think about it carefully, we really only need one state value in implementing this visibility toggler program; it's not just that the exercise is asking us to do so that we're thinking about it.
That is, at any point, either the paragraph is shown or hidden, right? Or being more explicit, either the paragraph is shown or not shown, right? And there we have our state — shown.
hidden and then obviously make the desired changes in the following discussion.shown is a Boolean. When it's true, it means the paragraph is shown, and when it's false, it means that the paragraph is hidden (not shown). Initially, since the paragraph is hidden, shown is false.
With this state set and as even stated in the exercise, however, we can of course not continue using buttonText and displayValue — they have to go away. To remedy their absence, we have to conditionally render the button's text and the paragraph's display style property.
Here's the code we get after all this discussion:
import { useState } from 'react';
function App() {
const [shown, setShown] = useState(false);
function toggleVisibility() {
setShown(!shown);
}
return (
<div>
<button onClick={toggleVisibility}>{shown ? 'Hide' : 'Show'}</button>
<p style={{ display: shown ? 'block' : 'none' }}>This is some text</p>
</div>
);
}The state change happens by negating the current value of shown and providing that to setShown(). So, if shown is true, it changes to false, and if it's false, it changes to true.
Time to run the code and see how it works:
As can be seen in the linked page above, the code works flawlessly.
And this completes this exercise.
