title: Axios Async-Await in React
body: <p>I'm trying to do some get, and post request, somehow the state got updated late (it should be .get, then .post)</p>
  
  <pre><code>async componentDidMount() {
  
      const {destination, weight} = this.state;
  
  
      axios.get(`https://myapi`)
          .then(res =&gt; {
              const customer = res.data;
  
              this.setState({ customer,
                  destination: customer[0].address[0].city,
              }
          })
  
     axios.post(`https://myapi`, {destination, weight})
          .then((post)=&gt;{
            const delivery = post.data;
              this.setState({ delivery,
                cost: delivery[0].cost[0].value
               });
          });
  
          return post;
  }
  </code></pre>
  
  <p>the state got updated, but somehow the post got error that destination should be filled. I find the solution of this is to use async await. I try to implement it but it doesn't work.</p>
  
  <p>here's what i've tried</p>
  
  <pre><code>async componentDidMount() {
  
          const {destination, weight} = this.state;
  
  
          axios.get(`https://myapi`)
              .then(res =&gt; {
                  const customer = res.data;
  
                  this.setState({ customer,
                      destination: customer[0].address[0].city,
                  }
              })
  
  const post = await axios.post(`https://api.cashless.vip/api/cost`, {destination, weight})
              .then((post)=&gt;{
            console.log(this.state.destination);
                const delivery = post.data;
                  this.setState({ delivery,
                    cost: delivery[0].cost[0].value
                   });
              });
  
              return post;
  }
  </code></pre>
  
  <p>i tried to console log the state of destination and yes it's indeed updated. am i doing async await wrong? thank you for your help!</p>