How to i iterate over this API data and display it , rudimental REACT/JSX-CodePudding

So i'm currently trying to learn more about using APIs and their data,

therefor i'm trying to fetch the PriceTicker of Bitpanda https://api.bitpanda.com/v1/ticker

And then use this data and make small cards with the Coin Price. Thats where i'm struggling.

I cant even iterate over the data. I tried so far the mapping method with data.map and as well the for each but i cant get it running.

So how do I iterare over the given data? And how could i display it?
Any help is highly appreciated!

import MyComponents from './MyComponents';
import useFetch from 'react-fetch-hook';
import { useState } from 'react';


function App() {
  
  const {isLoading, error, data} = useFetch("https://api.bitpanda.com/v1/ticker");
  console.log(isLoading);
  console.log(error);
  console.log(data);

  
  if(isLoading) return (<div>is loading .. .. ..</div>);
  if(error) return(<div>an error occurred .. .. </div>); 
  
  return (
    <div className="App">
       
      <MyComponents />
      
      <h3>on bitpanda</h3>
      <h2>The Bitcoin price today is</h2>

      

      <ul>{JSON.stringify(data['BTC'])}</ul> 
      <ul>{JSON.stringify(data['BTC'].EUR)}</ul>
    
     
    {/*  {data.map((coin) =>{
      return(
        <div>
        <p>{JSON.stringify(coin.EUR)}</p>
        </div>
      );
    })}
    */}



    
    </div>

    
    

  );
}

export default App;```

EDIT: 
if i try,

 ```{data.map((coin) =>{
      return(
        <div>
          {console.log(coin)}
        <p>{coin}</p>
        
        </div>
      );
    })}``` 

i get the data.map is not a function error, but i dont understand it. 

What i learned so far: i can display the keys,value and so on with calling Object.keys(data), so i know now the symbols of the coins are the keys.

CodePudding user response：

it's because data is a JSON object, if you want to iterate over the values you can use Object.values

{Object.values(data).map(item...)}