How to Show and Hide React Components (Easy!)

It’s common to want to show and hide React components based on a condition.

For example, imagine you have a pop-up dialog box on your web app. Most likely, you want the box to show up whenever the user has done something such as clicking a button or the like. In order to show and hide the dialog box component, we need three things:

1. A Boolean state variable to keep track of the component’s visibility status
2. Some logic to render the component based on that condition
3. A way to toggle the visibility status on and off

Let’s get to work on it!

NOTE: You can view a live demo of this tutorial on CodeSandbox! I have, of course, added styles and what-not to the demo, but you can see the concepts in action and even edit the code if you like!

And for more cool ways to toggle React components, check out this video by Code Angle!

Setting the `visible` state

To be able to show or hide a component, first we need a state to track the component’s status. This will be a Boolean state, and in most cases, it will default to false.

Here, you can assume that we have a DialogBox component defined in another file. The Container component will manage the dialog box’s visibility.

import { useState } from 'react';
import { DialogBox } from './components/DialogBox';

const Container = () => {
	const [dialogBoxVisible, setDialogBoxVisible] = useState(false);
};

Using a short-circuit to show and hide a component

Now that we have a way to track the component’s visibility status, we need a way to show or hide it based on that status.

We can use some short-circuiting to conditionally render the component based on the Boolean state variable. This will take the form of a Boolean AND operator that returns the component if the variable is equal to true

import { useState } from 'react';
import { DialogBox } from './components/DialogBox';

const Container = () => {
	const [dialogBoxVisible, setDialogBoxVisible] = useState(false);

	return (
		<div id='container'>
			{dialogBoxVisible && <DialogBox />}
		</div>
	);
};

Updating the visibility status with a button

As said earlier, we most likely want this dialog box to appear when the use clicks on a button. So let’s set up a couple of click events. There will be two click events here:

1. A click event on a button that sets the visibility status to true.
2. A click event on the entire Container component that sets the status to false. The user just has to click anywhere on the page to get rid of the dialog box.

import { useState } from 'react';
import { DialogBox } from './components/DialogBox';

const Container = () => {
	const [dialogBoxVisible, setDialogBoxVisible] = useState(false);

	const handleButtonClick = (e) => {
                e.stopPropagation();
		setDialogBoxVisible(true);
	};

	const handleContainerClick = (e) => {
		setDialogBoxVisible(false);
	};

	return (
		<div id='container' onClick={handleContainerClick}>
			{dialogBoxVisible && <DialogBox />}
			<button id='showDialog' onClick={handleButtonClick}>Show Dialog Box</button>
		</div>
	);
};

Remember, you can see a live demo of this on CodeSandbox!