[Solved] close notification after 5 seconds

[Atit]

Is this a good way to go about if you want to close notification after 5 seconds? in my case removeAfterSetDurationis not getting called.

function handleClose() {

    setGlobalData((state: any) => ({ ...state, message: "" }));
  }

function removeAfterSetDuration() {

    setTimeout(() => {
      setGlobalData((state: any) => ({ ...state, message: "" }));
    }, 5000);
   }

<Fade enter={true} exit={true} onEntered={removeAfterSetDuration}>
          <Notification
            type={{ style: 'warning', icon: false }}
            closable={true}
            onClose={handleClose}
          >
            <span>{props.message}</span>
          </Notification>
        </Fade>

[Kiril]

Hello Atit,

In order to hide the Notification, the developer can conditionally render the Notification based on the local App state.
In the provided code-snippet i can observe that the Notification is always rendered, since there is no condition for it.

I've prepared the following example demonstrating conditional rendering of the Notification component:

https://stackblitz.com/edit/react-ckwfn4

The specific part being that instead of rendering the `<Notification />`, we set a condition. In the provided example this condition is the local `toggle` state variable, so the rendering logic becomes `toggle && <Notification />` - thus rendering the Notification only when `toggle` is true. 

This logic can be further extended to set the `toggle` state based on a timeout or server response.

Please let me know if this example clarifies how to conditionally open/close the Notification, or if you have any questions.

Regards,
Kiril
Progress Telerik