title: Can't access array data from API call when using map() in React
body: <p>I'm attempting to map over data I received from an API call. Getting shallow endpoints works fine, but anything nested gives me an error. </p>
  
  <p>The goal is to get all of the opening themes and display them in a 'ul'. </p>
  
  <p>The exact error "TypeError: anime.opening_themes is undefined"</p>
  
  <p><a href="https://github.com/dvlprdave/AniPlex" rel="nofollow noreferrer">Repo to the project</a></p>
  
  <p>Heres the endpoints. </p>
  
  <p><a href="https://i.stack.imgur.com/oRI8N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oRI8N.png" alt="enter image description here"></a></p>
  
  <p>Heres my component. </p>
  
  <pre><code>const AnimeDetails = (props) =&gt; {
    const API = 'https://api.jikan.moe/v3/anime'
  
    const initialState = {
      anime: []
    }
  
    const [anime, setAnime] = useState(initialState)
  
    useEffect(() =&gt; {
      const getAnime = async () =&gt; {
        const response = await fetch(`${API}/${props.match.params.animeId}`)
        const data = await response.json()
  
        console.log(data);
        setAnime(data) // set initial state to hold data from our API call
      }
      getAnime()
    }, []) // [] prevents useEffect from running in an infinite loop
  
    return (
      &lt;AnimeDetailsWrapper&gt;
        &lt;Title&gt;{anime.title}&lt;/Title&gt;
        &lt;Details&gt;
          {anime.opening_themes
            .map((song, index) =&gt; (
              &lt;li key={index}&gt;{song}&lt;/li&gt;
            ))}
        &lt;/Details&gt;
      &lt;/AnimeDetailsWrapper&gt;
    )
  }
  </code></pre>