How you can Show or hide elements in React?

There are several methods for using CSS to display and hide elements in React.

However, each of them will require a few CSS properties to ensure that the element is not only hidden but also that users don't unintentionally click on it or are blocked by it.

Since CSS behaves differently in different browsers, you must ensure full browser support when showing and hiding elements.

Let's examine properly hidden element properties.

.example-properties {   display: none;   opacity: 0;   pointer-events: none;   visibility: none;   z-index: -1; }

Depending on your use case, you may not require all of these properties simultaneously, but you will almost certainly require a combination of them.

1. Display none case

If you use display: none to hide an element in a React app, you should probably conditionally render the element or component instead, because you won't need it in the DOM tree and you can't animate or transition in this case.

Consequently, when using display: none to hide an element, a helpful hint is to apply it to hide the element, but remove it when you need to display it.

This may seem obvious, but you must ensure that you do not redefine it as display: block, display: inline-block, etc., as this can cause UI bugs.

2. Opacity, pointer-events, and z-index

   There is a good chance that you are working with some kind of modal or lightbox when you use a combination of opacity, pointer-events, and z-index. If you want to fade it in and out, you cannot do this with display:none or by removing the element from the DOM.

In order to achieve this fading effect, you will not only need to combine the styles described above, but you will also need to apply a transition.

Here is the CSS to show/hide an element with a fade effect:

.lightbox {   position: absolute;   display: block;   top: 0;   bottom: 0;   left: 0;   right: 0;   background: rgba(0, 0, 0, 0.5);   transition: 0.3s all;   opacity: 1;   pointer-events: auto;   z-index: 1; } .hide-lightbox {   opacity: 0;  pointer-events: none;   z-index: -1; }

After you have defined your CSS, using React is as simple as adding or removing the hide-lightbox class depending on your preferences.

After that, when you put all of this together with the react example that follows:

import React, { useState } from "react"; import "./base.css"; import "./lightbox.css"; export default function App() {   const [hideLightbox, setHideLightbox] = useState(true);      return (     <>       <button onClick={() => setHideLightbox(false)}>Show Lightbox</button>       <div className={`lightbox ${hideLightbox ? "hide-lightbox" : ""}`} />     </>   ); }

This is what it looks like when you have a show/hide element in React that fades in and out: 

3. Visibility

The visibility property serves the same purpose as the display:none directive, in that it decides whether or not an element is visible. However, unlike display:none, the visibility property does not take precedence over the visibility.

To put it more simply, setting display:none on an element will make it appear as though it has been deleted from the Document Object Model (DOM), leaving no trace behind other than in the DOM tree.

On the other hand, setting an element's visibility to hidden will make it invisible, but it will still leave traces of its existence. This is because the space the element created will still exist, even though the element itself will be invisible.

Final Thoughts

By using the state in React, you can easily show or hide elements. You can use the ternary operator to conditionally render components, or use the setState() method to modify the component’s state and then conditionally render the element. You can also use the visibility property to show or hide an element without having to modify the component’s state.