In reactjs this.props.history.push('/') redirect doesn't work when set in a setTimeout delay

Question

I've got a pass where I want to redirect the user to the homepage so I've been using this

this.props.history.push('/')

Which has worked great, but now we want to delay this, so I've wrapped the whole thing in a setTimeout function as so

setTimeout(function () {
  this.props.history.push('/')
}, 1500);

But this breaks and gives me the error 'TypeError: Cannot read property 'history' of undefined'

I've tried adding the props value to a const and then setting the timeout on the const value but still no joy, I can't see any reason why this wouldn't work so I've hit a brick wall, can anyone shed some light on this one for me?

Answer 1

It's the context of this that's giving you trouble.

Try it like the following to bind this to your inner function

setTimeout(() => {
  this.props.history.push('/')
}, 1500);

Answer 2

The answer above works, but if for some reasons arrow function isn't working for you, you can do the following

create a method

gotoHome(){
   this.props.history.push('/')
}

bind the method to a context: this

If your component has a constructor, it is better to do the binding in it

this.gotoHome = this.gotoHome.bind(this)

pass the method to setTimeout

setTimeout(this.gotoHome, 1500)