title: React : how to change the state of a button with an api call?
body: <p>I'm coding a React app and I encountered a problem.</p>
  <p>I want to change the state of a buttonfrom <strong>Write</strong> to <strong>Loading...</strong> when I call the <code>HandleApiCall</code> function and I want to mantain it until I get all the data from the Axios api call.</p>
  <p>I'm using a class component</p>
  <p>This the JSX code.</p>
  <pre><code>&lt;form onSubmit={this.HandleApiCall.bind(this)}&gt;
                  &lt;div className=&quot;TextAreaContainer&quot;&gt;
                  { this.state.loading === false ? 
                    &lt;button className= &quot;btn_&quot; type=&quot;submit&quot; &gt;Write&lt;/button&gt; :
                    &lt;button className= &quot;btn_&quot; type=&quot;submit&quot;&gt;Loading...&lt;/button&gt;
                  }
              &lt;/div&gt;
            &lt;div className=&quot;TextareaContainer&quot;&gt;
             &lt;textarea
               className= &quot;textarea&quot;
               placeholder=&quot;write the description here&quot;
               value={this.state.input} 
               onChange={(ev) =&gt; {
                 this.updateBody(ev.target.value)
                 }
               }&gt;
             &lt;/textarea&gt;
           &lt;/div&gt;    
             &lt;/form&gt; 
  </code></pre>
  <p>This is the HandleApiCall funtion</p>
  <pre><code>HandleApiCall(e) {
      e.preventDefault();
  
  await this.setState({ loading : true });
  
      
   axios.post(TRANSLATE_API_URL, body).then(({ data: { text } }) =&gt; {//some code here}); 
  }
  </code></pre>
  <p>I tried to do in that way but it does not work.</p>
  <p>Any ideas?</p>