title: React.js with OpenWeatherMap, getting weathers.map is not a function
body: <p>I am learning React.js for college and am a bit stuck. I am getting this error:</p>
  <pre><code>weathers.map not a function
  </code></pre>
  <p>I am sure it's something simple but can't figure it out! It is a standard <code>create-react-app</code>,  created a directory called components and these 2 files live there:</p>
  <p><strong>Weathers.js:</strong></p>
  <pre><code>import {useState} from 'react'
  import axios from 'axios'
  import Weather from './Weather'
  
  function Weathers() {
      const [weathers, setWeathers] = useState()
      const [city, setCity] = useState('')
      const API = {
      link: &quot;http://api.openweathermap.org/data/2.5/weather?q=&quot;,
      key: &quot;&amp;appid=xxxxx&quot;
      }
  
      function handleSearchCity(e) {
          e.preventDefault()
          setCity(e.target.value)
      }
  
      async function searchWeathers(e) {
          e.preventDefault()
          console.log()
          var response = await axios.get(API.link + city + API.key)
          console.log(response)
          setWeathers(response.data)
      }
      
      return (
         &lt;div&gt;
           &lt;input value={city} onChange={handleSearchCity} /&gt;
           &lt;button onClick={searchWeathers}&gt;Search&lt;/button&gt;
           &lt;div&gt;
           &lt;/div&gt;
            {
              weathers.map(function(i, index){
                  return (
                    &lt;div&gt;
                      &lt;Weather name={i.name} /&gt;
                    &lt;/div&gt;
                  )
              })
          }
         &lt;/div&gt; 
      )
  }
  export default Weathers;
  </code></pre>
  <p><strong>Weather.js:</strong></p>
  <pre><code>function Weather(props) {
    return (
      &lt;div&gt;
        {props.name}
      &lt;/div&gt;
    );
  }
  
  export default Weather;
  </code></pre>