title: React - how to Redirect path after completing POST request using fetch
body: <p>I am trying to redirect to another path <strong>AFTER</strong> completing a POST request using fetch. </p>
  
  <p>I have set a variable in my state to watch for after the POST function completes</p>
  
  <p><code>this.state.successfulPOST: false</code></p>
  
  <p>and I am conditional rendering, so if i <code>this.state.successfulPOST: true</code>, my redirect gets rendered</p>
  
  <p>The problem is that my redirect happens <strong>before</strong> my POST request. How can I make it so that my POST request for <code>/api/account/update/</code> is finished then render my redirect for my GET request on this path<code>/checkout/shippingaddress</code>? </p>
  
  <p>Here is my full code:</p>
  
  <pre><code>import React, { Component } from "react";
  import "whatwg-fetch";
  import cookie from "react-cookies";
  import { Redirect } from 'react-router-dom';
  
  class GuestEmailForm extends Component {
    constructor(props) {
      super(props);
      this.state = {
        email: "",
        successfulPOST: false,
      };
    }
  
    updateGuestEmail = (data) =&gt; {
  
      const endpoint = "/api/account/update/"; 
      const csrfToken = cookie.load("csrftoken");
  
      if (csrfToken !== undefined) {
        let lookupOptions = {
          method: "POST",
          redirect: 'follow',
          headers: {
            "Content-Type": "application/json",
            "X-CSRFToken": csrfToken
          },
          body: JSON.stringify(data),
          credentials: "include"
        };
        fetch(endpoint, lookupOptions)
          .then(response =&gt; {
            return response.json();
          })
          .then(responseData =&gt; {
            this.setState({email: responseData.email})
          })
          .then( 
            this.setState({successfulPOST: true})
            )
          .catch(error =&gt; {
            console.log("error", error);
            alert("An error occured, please try again later.");
          });
      }
    };
  
  
    handleEmailChange = event =&gt; {
      const { name, value } = event.target;
      this.setState({ [name]: value });
    };
  
    handleSubmit = (event) =&gt; {
      event.preventDefault();
      let data = this.state;
  
      if (data !== undefined){
          (
            this.updateGuestEmail(data),
            console.log(this.state.email)
          )
      } else {
          ""
      }
    };
  
    resetSucessfulPOST = () =&gt; {
        this.setState({
          successfulPOST: false,
        })
    }
  
  
    componentDidMount() {
      this.resetSucessfulPOST()
    }
  
    render() {
  
      const {email, successfulPOST} = this.state
  
      // redirect to shipping page after successful POST of email
      if (successfulPOST === true)  
  
        return &lt;Redirect push to={{ pathname: '/checkout/shippingaddress'}} /&gt;
  
      else
  
        return (
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;div&gt;            
                &lt;label&gt;
                    Guest Email:
                    &lt;input 
                            className="input" 
                            type="email" 
                            name="email"
                            value={email} 
                            onChange={event =&gt; {
                                this.handleEmailChange(event);
                              }}
                            /&gt;
                &lt;/label&gt;
                &lt;button className="btn btn-primary"&gt;Submit&lt;/button&gt;
  
                &lt;/div&gt;
  
          &lt;/form&gt;
      );
    }
  }
  
  export default GuestEmailForm;
  
  </code></pre>
  
  <p>Thanks so much in advance!</p>