Hide after setInterval in react-CodePudding

I am trying to build a bar which appears after each 20 seconds and disappear after 5 seconds. It's working but often gives me error that classname in document.querySelector(".The_Bar").className = "The_Bar"; doesn't exist. So, is there any way to improvise this?

const Bar = () => {


  React.useEffect(() => {   
    const BarInterval = setInterval(() => {
      document.querySelector(".The_Bar").className = "The_Bar The_Bar_Show";
      const BarTimeout = setTimeout(() => {
        document.querySelector(".The_Bar").className = "The_Bar";
      }, 5000);
      return () => {
        clearTimeout(BarTimeout);
      };
    }, 20000);
    return () => {
      clearInterval(BarInterval);
      setNumber({});
    };
  }, [])

  
  return (
    <div className="The_Bar">
      <div className="Text">You viewing this page</div>
    </div>
  );
}

CodePudding user response：

First,Why do you use document.querySelector(".The_Bar").className in react?

For this you have useRef.

Second, if you want to dispaly and then remove a div, you can useState to change dynamically. this way you control the class using react hooks which more easy and "clean"

const Bar = () => {
const [showBar,setShowBar] = useState(false)

  React.useEffect(() => {   
    const BarInterval = setInterval(() => {
     setShowBar(true)
      const BarTimeout = setTimeout(() => {
     setShowBar(false)
      }, 5000);
      return () => {
        clearTimeout(BarTimeout);
      };
    }, 20000);
    return () => {
      clearInterval(BarInterval);
      setNumber({});
    };
  }, [])

  
  return (
   <div className={showBar ? "The_Bar The_Bar_Show" : "No_Bar"}>
      <div className="Text">You viewing this page</div>
    </div>
  );
}

No_Bar style :

{
display:none;
}

CodePudding user response：

You should not use such imperative approach to manipulate DOM when using React, try to achieve the same behaviour in a declarative way:

const Bar = () => {
  const [show, setShow] = useState(false);

  React.useEffect(() => {
    let interval;
    let timeout;

    interval = setInterval(() => {
      setShow(true);
      timeout = setTimeout(() => {
        setShow(false);
      }, 1000);
    }, 5000);
    return () => {
      clearInterval(interval);
      clearTimeout(timeout);
    };
  }, []);

  return (
    show && (
      <div className="The_Bar">
        <div className="Text">You viewing this page</div>
      </div>
    )
  );
};

Demo https://stackblitz.com/edit/react-ehwj9c

Selecting DOM elements with selectors in React is never a good idea, React makes use of a Virtual DOM to paint DOM and makes it asynchronously, so you may face all soort of bugs and misbehaviours by mixing imperative vanilla code with React code. You could use refs to access DOM nodes, but that also should be done very carefully. Instead of imperatively toggling a class as you would do in Vanilla JS, just toggle a React state, and use that state to declaratively toggle a view, or toggle a className, since React State triggers a re-render, this ensures that everything happens at the right pace.