title: App.js:29 Uncaught TypeError: Cannot read property 'map' of undefined
body: <p>I'm currently working through the University of Helsinki Full Stack Open course and I'm tearing my hear out with an error I just can't crack. I'm building a React web app that fetches data from the Rest Countries API (<a href="https://github.com/apilayer/restcountries" rel="nofollow noreferrer">https://github.com/apilayer/restcountries</a>). I'm trying to fetch a specific country (e.g. <a href="https://restcountries.eu/rest/v2/alpha/aus" rel="nofollow noreferrer">https://restcountries.eu/rest/v2/alpha/aus</a>) and render the name, capital, population, list of languages and flag. Everything except the list of languages works perfectly with this code:</p>
  
  <pre><code>    import React, { useState, useEffect } from 'react'
      import axios from 'axios'
  
      const App = () =&gt; {
        const [ country, setCountry] = useState([])
  
     useEffect(() =&gt; {
          console.log('effect')
          axios
            .get('https://restcountries.eu/rest/v2/alpha/aus')
            .then(response =&gt; {
              console.log('promise fulfilled')
              setCountry(response.data)
            })
        }, [])
        console.log({country})
  
        return (
          &lt;div&gt;
              &lt;h1&gt;{country.name}&lt;/h1&gt;
              &lt;p&gt;Capital: {country.capital}&lt;/p&gt;
              &lt;p&gt;Population: {country.population}&lt;/p&gt;
              &lt;h2&gt;Languages&lt;/h2&gt;
              &lt;h2&gt;Flag&lt;/h2&gt;
              &lt;img
                src={country.flag}
                style={{width:200, height:128}}
              /&gt;
          &lt;/div&gt;
        );
      }
  
      export default App;
  </code></pre>
  
  <p>However, when I add the following to the ..., to try and render the list of languages, I get the error: "App.js:29 Uncaught TypeError: Cannot read property 'map' of undefined"</p>
  
  <pre><code>        &lt;ul&gt;
            {country.languages.map(language =&gt;
              &lt;li key={language.name}&gt;{language.name}&lt;/li&gt;
            )}
          &lt;/ul&gt;
  </code></pre>
  
  <p>If anyone has any tips, it would be enormously appreciated. </p>