React Js Hide Div After 5 Seconds

React Js Hide Div After 5 Seconds:To hide a div in a React.js app after 5 seconds, employ the useState and useEffect hooks. Begin by creating a state variable to manage the div's visibility. Next, utilize useEffect to establish a timer that modifies the state, making the div invisible after 5 seconds. Alternatively, you can access the div via its ID using document.getElementById and set its display property to "none" directly, but the React state approach is generally preferred for better code organization and reactivity.

written

reviewed

updated

How do you hide a `<div>` in React js after 5 seconds?

This React.js code defines a functional component called "App" that manages the visibility of a div element. Initially, the div is shown (showDiv is true). The useEffect hook is used to set a timeout of 5 seconds, after which it updates showDiv to false, hiding the div. The clearTimeout function is used to prevent the timeout from running if the component unmounts. The rendered component displays a title and the div, which is conditionally rendered based on the value of showDiv. After 5 seconds, the div disappears automatically due to the timeout.

React Js Hide Div After 5 Seconds Example 1

  <script type="text/babel">
    const { useState, useEffect } = React;

    function App() {
      const [showDiv, setShowDiv] = useState(true);

      useEffect(() => {
        // Hide the div after 5 seconds
        const timeoutId = setTimeout(() => {
          setShowDiv(false);
        }, 5000); // 5000 milliseconds (5 seconds)

        // Clear the timeout to prevent it from running if the component unmounts
        return () => clearTimeout(timeoutId);
      }, []);

      return (
        <div className='container'>
          <h3>React Js Div Hide After 5 Seconds</h3>
          {showDiv && (
            <div style={{ border: '1px solid green' , padding:'16px' }}>
              This Div Automatically Hides After 5 Seconds
            </div>
          )}
        </div>
      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

Run

Output of React Js Hide Div After 5 Seconds

How do you hide a div with a specific ID in React.js using `getElementById` and set its `display` to `none` after a 5-second delay?

In this React.js code snippet, we use the useEffect hook to hide a div element after 5 seconds. Inside the hook, we set a timeout using setTimeout to change the display style property of the div to "none" after 5 seconds (5000 milliseconds). To ensure that the timeout is cleared and doesn't execute if the component unmounts, we return a cleanup function that calls clearTimeout with the timeoutId. The rendered component consists of a container with a heading and a div element named "myDiv" that automatically disappears after 5 seconds, providing a simple way to hide content in a React application

React Js Hide Div After 5 Seconds Example 2

  <script type="text/babel">
    const { useEffect } = React;

    function App() {
      useEffect(() => {
        // Hide the div after 5 seconds
        const timeoutId = setTimeout(() => {
          document.getElementById("myDiv").style.display = "none";
        }, 5000); // 5000 milliseconds (5 seconds)

        // Clear the timeout to prevent it from running if the component unmounts
        return () => clearTimeout(timeoutId);
      }, []);

      return (
        <div className='container'>
          <h3>React Js Div Hide After 5 Seconds Method 2</h3>
          <div id="myDiv" style={{ border: '1px solid green', padding: '16px' }}>
            This Div Automatically Hides After 5 Seconds
          </div>

        </div>
      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

Run

React JS Tutorial