How to disappear alert after 5 seconds in React JS?

user_12463240 0
Viewed 26937
import { useState } from 'react'
    
    const Message = ({ variant, children }) => {
      const [timeOut, setTimeOut] = useState(null)
    
      setTimeout(() => {
        setTimeOut(1)
      }, 3000)
    
      return (
        timeOut !== 1 && <div className={`alert alert-${variant}`}>{children}</div>
      )
    }
    
    Message.defaultPros = {
      variant: 'info',
    }
    
    export default Message

I want to disappear this alert after 2 or 3 seconds. I used this logic it's fine and working but In my console, I'm having this warning:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Is it affecting my app or is it oka? You can give me a better idea to implement this logic.

react-bootstrap reactjs javascript
4 Answers

You can read through the comments

import { useState, useEffect } from 'react'
    
const Message = ({ variant, children }) => {
  const [show, setShow] = useState(true)

  // On componentDidMount set the timer
  useEffect(() => {
    const timeId = setTimeout(() => {
      // After 3 seconds set the show value to false
      setShow(false)
    }, 3000)

    return () => {
      clearTimeout(timeId)
    }
  }, []);

  // If show is false the component will return null and stop here
  if (!show) {
    return null;
  }

  // If show is true this will be returned
  return (
    <div className={`alert alert-${variant}`}>
      {children}
    </div>
  )
}

Message.defaultPros = {
  variant: 'info',
}

export default Message;
user_88171460

This will show the alert during 3 seconds, then it will disappear :

import React, { useEffect, useState } from 'react';

const Message = ({ variant, children }) => {
  // the alert is displayed by default
  const [alert, setAlert] = useState(true);
      
  useEffect(() => {
    // when the component is mounted, the alert is displayed for 3 seconds
    setTimeout(() => {
      setAlert(false);
    }, 3000);
  }, []);     
    
  return (
    {alert && <div className={`alert alert-${variant}`}>{children}</div>}
  )
}
user_104291690 
import React, { useEffect, useState } from 'react';

const Message = ({ variant, children }) => {

  const [alert, setAlert] = useState(true);
      
  useEffect(() => {
    const timer = setTimeout(() => {
      setAlert(false);
    }, 3000);
    
    // To clear or cancel a timer, you call the clearTimeout(); method, 
    // passing in the timer object that you created into clearTimeout().
    
    return () => clearTimeout(timer);
  }, []);     
    
  return (
    {alert && <div className={`alert alert-${variant}`}>{children}</div>}
  )
}
user_118660370

If you use MUI, then you can make alerts appear and disapper with fade in transitions.
Here's the code

import Alert from "@mui/material/Alert";
import AlertTitle from "@mui/material/AlertTitle";
import Fade from "@mui/material/Fade";

export default function Registration() {

  const [alertVisibility, setAlertVisibility] = useState(false);

  return(
    <Fade
       in={alertVisibility} //Write the needed condition here to make it appear
       timeout={{ enter: 1000, exit: 1000 }} //Edit these two values to change the duration of transition when the element is getting appeared and disappeard
       addEndListener={() => {
         setTimeout(() => {
           setAlertVisibility(true)
         }, 2000);
       }}
       >
       <Alert severity="success" variant="standard" className="alert">
          <AlertTitle>Success</AlertTitle>
             Registration Successful!
          </Alert>
    </Fade>
  )
}

For more transitions refer this -> https://mui.com/material-ui/transitions/

user_79117310
Related