I have a notification component, which when rendered, I remove it with some delay.
The problem is that when I try to use clearTimeout to cancel the removal, it doesn't. Look
class Notify extends React.Component {
constructor(props){
super(props)
this.class = 'check'
this.state = {load:LineNotify[this.class].anime}
this._delay()
this.timerS = null
this.box = BoxNotify[this.class]
this.icon = IconNotify[this.class]
}
remove=()=>{
// console.log('removed')
unmountComponentAtNode(document.getElementById('notify'))
}
_delay=()=>{
this.timerS = setTimeout(this.remove,2400)
}
stop=()=>{
clearTimeout(this.timerS)
this.setState({load:LineNotify[this.class].line})
}
start=()=>{
this.timerS = setTimeout(this.remove,2400)
this.setState({load:LineNotify[this.class].anime})
}
I have functions to control component removal, they must be called with cursor input, ie if user hovers, I should use clearTimeout to cancel removal ("start,stop")
remove=()=>{
console.log('removed')
// unmountComponentAtNode(document.getElementById('notify'))
}
When I don't use unmountComponentAtNode, using clearTimeout works as expected, but when using unmountComponentAtNode, clearTimeout is ignored and the component is removed anyway
I found a solution. Maybe somehow the timer ID returned by setTimeout is getting lost.
class Notify extends React.Component {
constructor(props){
super(props)
this.class = 'check'
this.state = {load:LineNotify[this.class].anime}
this.timerS = this.timer()
this.box = BoxNotify[this.class]
this.icon = IconNotify[this.class]
}
timer=()=>setTimeout(()=>{
document.getElementById('notify').remove()
},2400)
stop=()=>{
clearTimeout(this.timerS)
this.setState({load:LineNotify[this.class].line})
}
start=()=>{
this.timerS = this.timer()
this.setState({load:LineNotify[this.class].anime})
}