reactjs - useEffect to fetch Blizzard API

Question

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

Failed to compile
./src/App.js
SyntaxError: /Users/gabrielcastro/Development/code/React/convergence/src/App.js: Unexpected token, expected "," (12:2)

  10 |   .then(response => response.races.json())
  11 |   .then(console.log(response.json())
> 12 |   },[races]) 
     |   ^
  13 |  
  14 | 
  15 |   return (

This is what my code looks like... I took out the access token just for this post.

import React, { useState, useEffect } from 'react'

export default function App() {

  const [races, setRaces] = useState('races')
  const [items, setItems] = useState([])
  
  useEffect(() => {
  fetch(`https://us.api.blizzard.com/data/wow/playable-race/index?namespace=static-us&locale=en_US&access_token=`)
  .then(response => response.races.json())
  .then(console.log(response.json())
  },[races]) 
 

  return (
    <div>
    {items.map(item => {
   <li key={item.id}>
    Race: {item.name}
  </li>
  })}
     </div> 
     )
    }

below is a snip-it of information I am attempting to access

Any help is appreciated!

Answer 1

The .map() method is only available for arrays. The data you're trying to access might be an object. You need to drill down to the races key, which holds the data you need and is in fact an array so you should be able to run .map() on it.

Can you try setting the races attribute in your state to something like response.races to isolate the data you want to work with, then try again.