title: My handleClick event is not working as intended
body: <p>The functionality of the handleClick is to simply do <code>this.setState({details: true})</code> and vice-versa when it is already true. The console log shows that the state of details is changing between true and false on every click however the line only shows &quot;Couldnt call the details&quot;</p>
  <pre><code>          const retval = (
              &lt;div&gt;
                &lt;hr /&gt;
                &lt;div  className=&quot;weather-card&quot;&gt;
                  &lt;h3&gt;City: {this.state.city}&lt;/h3&gt; &lt;img onClick={() =&gt; this.handleClick()} src={this.state.image} /&gt;
                  &lt;h3&gt;
                    Temprature: {this.state.temp} Feels Like: {this.state.feels}
                  &lt;/h3&gt;
                  &lt;p&gt;{this.state.w_status}&lt;/p&gt;
                  &lt;p&gt;{this.state.description}&lt;/p&gt;
                  &lt;div id=&quot;details&quot; className=&quot;weather-details&quot;&gt;
                    {this.state.details ? &quot;well well well&quot;: &quot;Couldnt call the details&quot;}
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;hr /&gt;
              &lt;/div&gt;
            );
  </code></pre>
  <pre><code>  async handleClick(e) {
  
      if(this.state.details == true){
          this.setState({ details: false});
          console.log(&quot;It is hidden&quot;);
      }
      else{
          this.setState({ details: true});
          console.log(&quot;It is shown&quot;);
  
      }
    }
  
  </code></pre>