I don't really know what is going on, but I think that the removeEventListener is not working properly. Here is my code, my app is crashing everytime I click more than 5 times on any of the buttons and I can't find a solution anywhere.
const doTri = (e) => {
if(e.id === "active"){
setOrder(!order);
}
else {
document.getElementById("active")?.removeAttribute("id");
e.setAttribute('id', 'active');
setTri(e.classList[1]);
setOrder(true)
}
}
useEffect(() => {
Array.from(document.getElementsByClassName("headerBtn")).forEach((e)=>{
e.addEventListener('click', ()=>{doTri(e)})
})
return () => {
Array.from(document.getElementsByClassName("headerBtn")).forEach((e)=>{
e.removeEventListener('click',()=>{doTri(e)})
})
}
}, [tri,order])
as I said the removeEventListener function wasn't working so I did some changes in order to not pass any params to the do tri functions, that is what I did and it worked.
const doTri = (e) => {
if(e.currentTarget.id === "active"){
setOrder(!order);
}
else {
document.getElementById("active")?.removeAttribute("id");
e.currentTarget.setAttribute('id', 'active');
setTri(e.currentTarget.classList[1]);
setOrder(true)
}
}
useEffect(() => {
Array.from(document.getElementsByClassName("headerBtn")).forEach((e)=>{
e.addEventListener('click', doTri)
})
return () => {
Array.from(document.getElementsByClassName("headerBtn")).forEach((e)=>{
e.removeEventListener('click', doTri)
})
}
}, [tri,order])