reactstrap alert automatic hidden

Question

I am new in React and I use Alert - Dismissing from Reactstrap , I need the alert to automatically disappear after 2s. I tried to find some function that could be done, but unfortunately I did not. Thank you for help

Answer 1

Please have a look at this code, hiding alert after a specific time

when you want to show the alert on some action, you can enable a state associated with that alert and disable it when you want to hide it.

Answer 2

I had a similar problem. My purpose was to show an Alert message after a Modal closed. I am using react-bootstrap for Modal and Alert component with useState and use Effects hooks.

const [visibleAlert, setVisibleAlert] = useState(false); --> init state

const handleVisible = () => { ---> Last State for Alert
    setAlertVisible(true)
    setTimeout(() => { ---> 2 seconds later which is closing
        setAlertVisible(false)
    }, 2000);
} 

useEffect(() => {

    handleClose();  ----> This is for Modal
    return () => {
    handleVisible();  ---> This is for Alert message
};

And this is my Alert component.

<Alert show={visibleAlert} variant="success"} dismissible>
    Employee List Updated Successfully.
</Alert>