javascript - ¿Cómo definir la interfaz correcta y recorrer los datos en React?

Soy algo nuevo en Typescript. Aquí tengo una API simple, y quiero iterar a través de ella y mostrar los datos. Puedes ir al enlace de la API y ver los datos en bruto. Estaría muy agradecido por algo de ayuda.

Interfaces:

export interface ITrending {
  coins: IItem[]
}

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

Código React:

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

Respuesta de ejemplo de la API:

{
   "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":[]
}

Respuesta #1

Como las monedas están dentro de data.coins, necesitas tenerlo de esta manera:

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