title: useEffect to fetch Blizzard API
body: <p>I am Attempting just to do a fetch on the Blizzard API using useEffect as my hook.  The call goes thru successfully however when I attempt to set my key={item.id} and then try to extract the information I want thru {item.race} I get</p>
  <pre><code>Failed to compile
  ./src/App.js
  SyntaxError: /Users/gabrielcastro/Development/code/React/convergence/src/App.js: Unexpected token, expected &quot;,&quot; (12:2)
  
    10 |   .then(response =&gt; response.races.json())
    11 |   .then(console.log(response.json())
  &gt; 12 |   },[races]) 
       |   ^
    13 |  
    14 | 
    15 |   return (
  </code></pre>
  <p>This is what my code looks like... I took out the access token just for this post.</p>
  <pre><code>import React, { useState, useEffect } from 'react'
  
  export default function App() {
  
    const [races, setRaces] = useState('races')
    const [items, setItems] = useState([])
    
    useEffect(() =&gt; {
    fetch(`https://us.api.blizzard.com/data/wow/playable-race/index?namespace=static-us&amp;locale=en_US&amp;access_token=`)
    .then(response =&gt; response.races.json())
    .then(console.log(response.json())
    },[races]) 
   
  
    return (
      &lt;div&gt;
      {items.map(item =&gt; {
     &lt;li key={item.id}&gt;
      Race: {item.name}
    &lt;/li&gt;
    })}
       &lt;/div&gt; 
       )
      }
  </code></pre>
  <p>below is a snip-it of information I am attempting to access
  <a href="https://i.stack.imgur.com/Np5bV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Np5bV.png" alt="enter image description here" /></a></p>
  <p>Any help is appreciated!</p>