How to handle visibility: hidden in React

avatar

Borislav Hadzhiev

Last updated: Apr 23, 2022

banner

Photo from Unsplash

How to handle visibility: hidden in React #

To set the CSS visibility property to hidden in React:

  1. Store a boolean in the state that indicates if the element should be visible.
  2. Conditionally set the visibility property in the element's style prop.
  3. For example, style={{visibility: isVisible ? 'visible' : 'hidden'}}.
App.js
import {useState} from 'react'; export default function App() { const [isVisible, setIsVisible] = useState(true); const handleClick = event => { // 👇️ toggle visibility setIsVisible(current => !current); }; return ( <div> <div style={{visibility: isVisible ? 'visible' : 'hidden'}}> <h2>Some content here</h2> </div> <button onClick={handleClick}>Toggle visibility</button> </div> ); }

handle visibility hidden

We used the useState hook to store a boolean that indicates if an element should be visible or not.

Every time the button element is clicked, the isVisible boolean is toggled, but this could be triggered in any other way.

Note that we passed a function to setIsVisible. This is important, because the function we passed to setIsVisible is guaranteed to be invoked with the current (most up to date) value of the isVisible boolean.

If the new state is computed using the previous state, you can pass a function to setState().

The visibility property of the style prop of the div element is conditionally set using a ternary operator.

The ternary operator is very similar to an if/else statement.

If the value to the left of the question mark is truthy, the operator returns the value to the left of the colon, otherwise the value to the right of the colon is returned.

App.js
const result1 = 5 === 5 ? 'yes' : 'no'; console.log(result1); // 👉️ "yes" const result2 = 5 === 10 ? 'yes' : 'no'; console.log(result2); // 👉️ "no"

If the isVisible state variable stores a truthy value, we set the visibility property to visible. Otherwise, it's set to hidden.

The same approach can also be used if you rely on setting class names for your styling.

App.js
import {useState} from 'react'; // 👇️ import css file import './App.css'; export default function App() { const [isVisible, setIsVisible] = useState(true); const handleClick = event => { // 👇️ toggle visibility setIsVisible(current => !current); }; return ( <div> <div className={isVisible ? 'visible' : 'hidden'}> <h2>Some content here</h2> </div> <button onClick={handleClick}>Toggle visibility</button> </div> ); }

And here is the css that defines the visible and hidden classes.

App.css
.visible { visibility: visible; } .hidden { visibility: hidden; }

The code snippet above achieves the same result using classes instead of the style prop.

If the element you are setting the class on has different classes as well, use a template string.

App.js
import {useState} from 'react'; // 👇️ import css file import './App.css'; export default function App() { const [isVisible, setIsVisible] = useState(true); const handleClick = event => { // 👇️ toggle visibility setIsVisible(current => !current); }; return ( <div> <div className={`my-class ${isVisible ? 'visible' : 'hidden'}`}> <h2>Some content here</h2> </div> <button onClick={handleClick}>Toggle visibility</button> </div> ); }

The dollar sign curly braces syntax enables us to evaluate an expression directly in the template string.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.