Looping over an array in react

Question

I am having trouble iterating through this api and displaying the data. You can see the sample api in here https://api.coingecko.com/api/v3/search/trending. I would be really grateful if you help me

interface

export interface Item {
    id: string;
    name: string;
    symbol: string;
    market_cap_rank: number;
    thumb: string;
    large: string;
    score: number;
}

export interface Coin {
    item: Item;
}

export interface ResponseObject{
    coins: Coin[];
   
}

React Code

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

  return {response.coins?.map((p) => {
          return <div>{p.item.name}
</div>;
}

export default Home

Sample Api

{
   "coins":[
      {
         "item":{
            "id":"superfarm",
            "name":"SuperFarm",
            "symbol":"SUPER",
            "market_cap_rank":235,
            "thumb":"https://assets.coingecko.com/coi1613975899",
            "large":"https://assets.coingecko.com/coins
            "score":0
         }
      }
   ],
}

You are rendering an empty div in the Home component. What do you expect? — Virtuoz
– Virtuoz, Commented May 1, 2021 at 17:53
I guess like problem is that your initialValue in useState is an array, but u get an object after axios — vinodel.max
– vinodel.max, Commented May 1, 2021 at 17:57

Jonathan Alfaro · Accepted Answer · 2021-05-01 18:20:40Z

1

The problem is from axios you get an array of ResponseObjects and then you set it to the "trending" field. But then in your return statement you treat it like a single object...

Perhaps you need to do something like

return {trending[0].coins?.map((p) => {
          return <div>{p.item.name}
</div>;

So that you grab the first item.

Also I am not sure if this is an error but your return statement references the "response" which is internal to the "then" clause when maybe it should be referencing the local state "trending".

Also in your axios call you expect an array ResponseObject[] and also in your useState you expect an array... But in your "Sample Api" it seems like it is a single object. So maybe changing ResponseObject[] to ResponseObject both in the axios call and in the useState and finally your code will end up looking like this:

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

  return {trending?.coins?.map((p) => {
          return <div>{p.item.name}
</div>;
}

edited May 1, 2021 at 18:20

answered May 1, 2021 at 18:07

Jonathan Alfaro

4,4063 gold badges34 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Tequila Over a year ago

getting this error TypeError: Cannot read property 'coins' of undefined

Jonathan Alfaro Over a year ago

look at the name of the property i used trending not response.... also can you post the output of the console.log(response.data).. that way I can see for sure what the result of the axios call it

Tequila Over a year ago

I did it, still the same

Jonathan Alfaro Over a year ago

look at my updated answer and please add the output of the console.log(response.data) to the question

Tequila Over a year ago

Can you go to the Api link you can see the data

|

Collectives™ on Stack Overflow

Looping over an array in react

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related