How to use setTimeout function in condition statement?

Question

I want to show alert that message was sent (202) or has errors (else) on screen but this message should be clean after 3 seconds.

I usually use it only in useEffect hook, but I want it put in a condition

if (res.status === 200) {         
    setTimeout(function() {
        setStatus('success')   
    }, 1000);

Update:

I tried suggested snippets of code, but not working. Solution with [res...] cause a error, because react do not see variable like that. I go forward with this code, adding in if statement new variable which is associated with res... but still not work

      useEffect(() => {

        const timer =  ""
    

        if (kupa === "sukces") {         
          const timer =  setTimeout(function() {
          setStatus('success')   }, 1000); 
         
      }
      if (kupa === "error") {         
        const timer =    setTimeout(function() {
              setStatus('error')   }, 1000); 
             }
              return () => clearTimeout(timer);

      },  [kupa]);

Does this answer your question? [Dismiss react error messages after a timeout](https://stackoverflow.com/questions/61625297/dismiss-react-error-messages-after-a-timeout) — Kadet, Jun 21 '22 at 11:58
you can't dismiss browser alert('something') window as it passes control to the user and your code can only wait for he/she to close it. — DINK74, Jun 21 '22 at 12:12
change kupa from useEffect dependency to be [status]. also "sukces" in the condition to be "success" — Amr yasser, Jun 21 '22 at 13:25

Amr yasser · Answer 1 · 2022-06-21T12:16:18.887

0

I think you can add the condition inside useEffect and based on the res.status the component will be re-render. if the res.status === 200 then setStatus('success') will be updated.

useEffect(() => {
if (res.status === 200) {         
    setTimeout(function() {
        setStatus('success')   
    }, 1000);
 }
}, [res.status])

edited Jun 21 '22 at 12:16

answered Jun 21 '22 at 12:10

Amr yasser

408
5
10

here's a [demo](https://codesandbox.io/s/amazing-blackwell-tjqe16?file=/src/App.js) for your code. – Amr yasser Jun 21 '22 at 13:26
1

Be careful using timeouts. Clear the timeout in the return statement of the useEffect, otherwise the code runs even after the component unmounts. – Shah Jun 24 '22 at 22:23
1

@Shah Thanks for notifying me. noted – Amr yasser Jun 24 '22 at 22:30

score 0 · Answer 2 · answered Jun 21 '22 at 14:15

Try this one:

useEffect(() => {
        
    

        if (kupa === "sukces") {         
          
          setStatus('success')   
      }
      if (kupa === "error") {         
       
              setStatus('error')   
             }

         
              
                return () => {  setTimeout(function() {
                  setStatus('')  
                setKupa('') }, 3000); 
   }
               
                

      },  [kupa] );

How to use setTimeout function in condition statement?

2 Answers2