title: Cannot figure out why API JSON object will not render to React component
body: <p>I cannot figure out what I am doing wrong here. I submit a request to the API and an object is returned, but I cannot seem to get the component to render.</p>
  <p>//Code</p>
  <pre><code>import React, { Component } from &quot;react&quot;
  import axios from 'axios';
  
  class Weather extends Component {
    constructor(props){
      super(props)
        this.state = {
          posts: [],
      };
    }
  
    componentDidMount() {
      const query = &quot;Paris&quot;;
      const apiKey = {api key here};
      const unit = &quot;metric&quot;;
      const url = &quot;https://api.openweathermap.org/data/2.5/weather?q=&quot; + query + &quot;&amp;appid=&quot; + apiKey + &quot;&amp;units=&quot; + unit;
      axios.get(`${url}`)
        .then(response =&gt; {
            console.log(response);
            this.setState({posts: response.data})
  
        })
        .catch(error =&gt; {
            console.log(error);
        })
    }
  
    render() {
      const { posts } = this.state;
      return(
          &lt;&gt;
            {posts.length ? &lt;div&gt;Temperature: {posts.main.temp} Description: {posts.weather[0].description}&lt;/div&gt; : null}
          &lt;/&gt;
      );
    }
  }
  
  export default Weather;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/auYse.png" rel="nofollow noreferrer">enter image description here</a></p>