title: Reactjs - redirect after x seconds and resetting the state
body: <p>I am working on a forgot password form. When the user fills in the form - I want to replace the form with a thank you message, then redirect the user to the login page after 5 seconds. I also want to empty the forgotData state - so that a user can return back to the form - or refresh etc.. to fill it in again..</p>
  
  <p>my current code looks like this - I've tried to null the state on componentWillUnmount - but its not working.</p>
  
  <pre><code>&lt;Redirect refresh='5' to='/login' &gt;
  </code></pre>
  
  <p>^ is something like that possible?</p>
  
  <p>the forgot page looks like this.</p>
  
  <pre><code>import React, { Component } from 'react'
  import { withRouter, Redirect } from 'react-router-dom';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import { fetchForget } from '../../actions/forgotAction';
  
  import { Row, Col } from 'antd';
  
  // components
  import ForgotPasswordSyncValidationForm from './ForgotPasswordSyncValidationForm'
  
  // this is a class because it needs state
  class ForgotPassword extends Component {
  
    constructor(props, context) {
      super(props, context);
      this.submit = this.submit.bind(this);
    }
  
    componentDidMount() {    
      // console.log('this', this)
    }
  
    componentWillMount () {
      document.body.classList.add('screenbackground');
    }
  
    componentWillUnmount() {
      document.body.classList.remove('screenbackground');
  
      this.state = {
        forgotData: null
      }
    }
  
    submit(data) {
      this.props.fetchForget(data);
    }
  
    render() {
  
      // when the user has applied for a new password
      /*
      if(this.props.forgotData.isForgot){
        setTimeout(function() { 
          return &lt;Redirect to='/login'/&gt;;
        }.bind(this), 5000);
      }
      console.log(this.props.forgotData)
      */
  
      return (
        &lt;div className="Page form-components dark"&gt;
          &lt;h2&gt;Forgot Password?&lt;/h2&gt;        
          &lt;Row&gt;
            &lt;Col xs={24} sm={24} md={10}&gt;
              &lt;p&gt;A message here about what this forgot form is about&lt;/p&gt;
            &lt;/Col&gt;
            &lt;Col xs={24} sm={24} md={24}&gt;
                &lt;Row&gt;
                  &lt;Col xs={24} sm={24} md={6}&gt;
                    {!this.props.forgotData.isForgot ? (
                       &lt;ForgotPasswordSyncValidationForm onSubmit={this.submit} /&gt;
                    ) : (
                      &lt;div&gt;
                      &lt;p&gt;Thank you for filling in the forgot password form. We have generated a new password for you, please check your email.&lt;/p&gt;
                        &lt;Redirect to='/login'/&gt;
                      &lt;/div&gt;
                    )}
                  &lt;/Col&gt;
                &lt;/Row&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
          &lt;div className="shell" /&gt;
          &lt;div className="screen-background forgot" /&gt;        
        &lt;/div&gt;
      )
    }
  
  }
  
  function mapStateToProps(state) {
    return {
      forgotData: state.forgot
    };
  }
  
  function mapDispatchToProps(dispatch) {
   return bindActionCreators({ fetchForget }, dispatch);
  }
  
  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ForgotPassword))
  </code></pre>