how to display a message after submitting a form in React?

Question

I am trying to display the "Thank you for ordering!" message after submitting the form and then redirect to the home page after 3 seconds. But it only redirects me to the home page without displaying the message! Thank you!

  sendToHomepage = () => {
    setTimeout(() => {
      console.log("inside the timeout");
      document.location.href = "/";
    }, 3000);
  };
    let form = (
      <form onSubmit={this.orderHandler}>
        {formElementsArray.map((formElement) => (
          <Input
            key={formElement.id}
            elementType={formElement.config.elementType}
            elementConfig={formElement.config.elementConfig}
            value={formElement.config.value}
            invalid={!formElement.config.valid}
            shouldValidate={formElement.config.validation}
            touched={formElement.config.touched}
            changed={(event) => this.inputChangedHandler(event, formElement.id)}
          />
        ))}
        <Button btnType="Success" disabled={!this.state.formIsValid}>
          ORDER
        </Button>
      </form>
    );
    if (this.props.loading) {
      form = <Spinner />;
    }
    if (this.props.purchased) {
      form = (
        <div>
          <h2>Thank you for your order! </h2>
          <h4>you will be redirected in 3 seconds...</h4>
        </div>
      );
      this.sendToHomepage();
    }

    return (
      <div className={classes.ContactData}>
        <h4>Enter your Contact Data</h4>
        {form}
      </div>
    );
  }
}

Answer 1

It's better to set formSubmitionStatus state, which accepts 3 values notSubmitted, loading and submitted, and display different component based on them like this :

const [formSubmitionStatus, setFormSubmitionStatus] = useState('notSubmitted');

const TheForm = (
  <form onSubmit={this.orderHandler}>
    {formElementsArray.map((formElement) => (
      <Input
        key={formElement.id}
        elementType={formElement.config.elementType}
        elementConfig={formElement.config.elementConfig}
        value={formElement.config.value}
        invalid={!formElement.config.valid}
        shouldValidate={formElement.config.validation}
        touched={formElement.config.touched}
        changed={(event) => this.inputChangedHandler(event, formElement.id)}
      />
    ))}
    <Button btnType="Success" disabled={!this.state.formIsValid}>
      ORDER
    </Button>
  </form>
);

return (
    <div className={classes.ContactData}>
    <h4>Enter your Contact Data</h4>
        {formSubmitionStatus === 'notSubmitted' && TheForm}
        {formSubmitionStatus === 'loading' && <Spinner />}
        {formSubmitionStatus === 'submitted' && (
          <div>
             <h2>Thank you for your order! </h2>
             <h4>you will be redirected in 3 seconds...</h4>
          </div>
        )}
    </div>
);

and for redirecting to the home page after 3 seconds, you can use useEffect on formSubmitionStatus like this:

useEffect(() => {
     if (formSubmitionStatus === "submitted") {
          sendToHomepage(); // call your sendToHomepage function
     }
}, [formSubmitionStatus])