Cannot figure out why API JSON object will not render to React component

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.

//Code

import React, { Component } from "react"
import axios from 'axios';

class Weather extends Component {
  constructor(props){
    super(props)
      this.state = {
        posts: [],
    };
  }

  componentDidMount() {
    const query = "Paris";
    const apiKey = {api key here};
    const unit = "metric";
    const url = "https://api.openweathermap.org/data/2.5/weather?q=" + query + "&appid=" + apiKey + "&units=" + unit;
    axios.get(`${url}`)
      .then(response => {
          console.log(response);
          this.setState({posts: response.data})

      })
      .catch(error => {
          console.log(error);
      })
  }

  render() {
    const { posts } = this.state;
    return(
        <>
          {posts.length ? <div>Temperature: {posts.main.temp} Description: {posts.weather[0].description}</div> : null}
        </>
    );
  }
}

export default Weather;

enter image description here