React - How to show then hide elements after a few seconds

Ever wondered how to hide elements after a few seconds in React?

Problem statement: I want to show elements and make them disappear after a few seconds in React.

Solution: use setTimeout method from JavaScript, and hooks from React.

Achieving this behavior in React is similar to how you'd do it in Vanilla JavaScript - by using setTimeout. The only difference is you'll also use React hooks to store the visibility state, and set it to appear or disappear.

Consider this React example:

import React from 'react';

function App() {
  return (
    <div className="App">
        <button>Show alert</button>
    </div>
  );
}

export default App;

For now we only have a button. But we want an alert to show after clicking the button. Let's add the markup and necessary hooks for that:

import React from 'react';

function App() {
+    const [ isAlertVisible, setIsAlertVisible ] = React.useState(false);

+    const handleButtonClick = () => {
+        setIsAlertVisible(true);
+    }

    return (
        <div className="App">
-           <button>Show alert</button>
+           <button onClick={handleButtonClick}>Show alert</button>
+           {isAlertVisible && <div className='alert-container'>
+               <div className='alert-inner'>Alert! Alert!</div>
+           </div>}
        </div>
  );
}

export default App;

What we did:

used useState hook to create isAlertVisible and setIsAlertVisible.
created a handleButtonClick function for when the button is clicked, and assigned it to the onClick property of the button.
added the alert markup, and only show it when isAlertVisible is true.

We also want to add styles to the alert section, so it'll look more like an alert:

.alert-container {
  position: absolute;
  top: 2rem;
  left: 0;
  right: 0;
}

.alert-inner {
  display: inline-block;
  padding: 8px 16px;
  z-index: 1;
  background-color: #ffffff;
  box-shadow: 1px 2px 10px -3px rgb(0 0 0 / 70%);
  -webkit-box-shadow: 1px 2px 10px -3px rgb(0 0 0 / 70%);
  -moz-box-shadow: 1px 2px 10px -3px rgb(0 0 0 / 70%);
}

Now to the important part - we want the alert to disappear after a few seconds. Suppose we want the alert to hide after 3 seconds, so we'll use the useTimeout function, and pass 3000 milliseconds as the second parameter:

import React from 'react';

function App() {
    const [ isAlertVisible, setIsAlertVisible ] = React.useState(false);

    const handleButtonClick = () => {
        setIsAlertVisible(true);

+        setTimeout(() => {
+            setIsAlertVisible(false);
+        }, 3000);
    }

    return (
        <div className="App">
           <button onClick={handleButtonClick}>Show alert</button>
           {isAlertVisible && <div className='alert-container'>
               <div className='alert-inner'>Alert! Alert!</div>
           </div>   
        </div>}
  );
}

export default App;

And there you have it! Customize your alert to show more content, change the duration, change its style, go crazy 😉

A good next step is to extract this behavior and turn it into a separate Alert component. Make it accept different props from the parent, such as duration, content, position, and so on. Then whenever you need to alert a message, you can just re-use this Alert component.

Happy coding!

Blog

React - How to show then hide elements after a few seconds

Karla Dampilag

Join Our Newsletter. No Spam, Only the good stuff.

Related