How do I stop timer in react?

Question

I am trying to stop the timer in the beginning of my display notification because timer keeps getting added. However I am having trouble doing it. Any ideas?

export function displayNotification(msg, bool){
    var d = document.getElementById("notification");
    d.innerHTML = msg;
    d.style.opacity = "1";

    if(bool){d.style.backgroundColor="#77DD77"}
    else{d.style.backgroundColor="rgb(196, 88, 68)"}
    window.setTimeout(function(){
        d.style.opacity = "0";
        d.innerHTML = "";
    },3000);
}

Thank you for all your help!

Answer 1

try :

export function displayNotification(msg, bool){
    var d = document.getElementById("notification");
    d.innerHTML = msg;
    d.style.opacity = "1";

    if(bool){d.style.backgroundColor="#77DD77"}
    else{d.style.backgroundColor="rgb(196, 88, 68)"}
    let timer = window.setTimeout(function(){
        d.style.opacity = "0";
        d.innerHTML = "";
    },3000);
    return timer
}

let timer = displayNotification(msg, bool)
clearTimeout(timer)