javascript - Hur man definierar rätt interface och loopar över datan i React?

Jag är lite ny på Typescript. Här har jag ett enkelt API, och jag vill iterera genom det och visa datan. Du kan gå till API-länken och se rådata. Jag skulle vara väldigt tacksam för lite hjälp.

Gränssnitt:

export interface ITrending {
  coins: IItem[]
}

export interface IItem {
  item: {
    id: string;
    name: string;
    symbol: string;
    market_cap_rank: number;
    thumb?: string;
    large?: string
  } 
}

React-kod:

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { ITrending } from '../interfaces'
const TRENDING = 'https://api.coingecko.com/api/v3/search/trending'
const Home = () => {
  const [trending, setTrending] = useState<ITrending[]>([])
  useEffect(() => {
    axios.get<ITrending[]>(TRENDING).then((response) => {
      setTrending(response.data)
      console.log(response.data)
    })
  }, [])

  return <div></div>
}

export default Home

Exempel på API-svar:

{
   "coins":[
      {
         "item":{
            "id":"superfarm",
            "name":"SuperFarm",
            "symbol":"SUPER",
            "market_cap_rank":235,
            "thumb":"https://assets.coingecko.com/coins/images/14040/thumb/6YPdWn6.png?1613975899",
            "large":"https://assets.coingecko.com/coins/images/14040/large/6YPdWn6.png?1613975899",
            "score":0
         }
      },
      {...}
   ],
   "exchanges":[]
}

Svar #1

Eftersom mynten finns inne i data.coins, behöver du ha det på detta sätt:

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { ITrending } from '../interfaces'
const TRENDING = 'https://api.coingecko.com/api/v3/search/trending'
const Home = () => {
  const [trending, setTrending] = useState<ITrending[]>([])
  useEffect(() => {
    axios.get<ITrending[]>(TRENDING).then((response) => {
      setTrending(response.data.coins)
      console.log(response.data)
    })
  }, [])

  return <div>{trending.map(t => (<div key={t.item.id}>{t.item.name}</div>)}</div>
}

export default Home