I'm fetching the top 5 nft collections by volume to display them as a table but when I map the data it displays nothing. When a click the "get" button everything disappears in the webpage. I'm trying to display a table contaning the top 5 collections from the json received
import React from 'react';
import { useState } from 'react';
const GetTop5 = () => {
const [data, setData] = useState([]);
console.log(data);
const getAPI = () => {
const options = {method: 'GET', headers: {Accept: 'application/json'}};
fetch(`https://www.nftscan.com/nftscan/getTopTrendingData?range=1d&volumeSort=desc`, options)
.then(response => response.json())
.then(response => {
setData(response.assets);
console.log(response);
})
.catch(err => console.error(err));
}
return (
<>
<div>
<button onClick={getAPI}>get</button>
{data.map(nft => {return(<div><ul><li>nft.id , nft.floor_price , nft.sales </li></ul></div>)})}
</div>
</>
);
}
export default GetTop5
This is the index.js file
import './App.css';
import Nav from './components/Nav';
import InteractiveList from './components/Top5Collections';
import GetTop5 from './functions/gettop5';
function App() {
return (
<>
<Nav />
<InteractiveList/>
<GetTop5/>
</>
);
}
export default App;
This is the console.log(response)
"msg": "Success",
"code": 200,
"data": [
{
"nft_platform": "CryptoPunks",
"nft_address": "0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb",
"floor_price": 73,
"average_price": 89.01,
"total_value": 1424.16,
"count": 16,
"image": "https://logo.nftscan.com/logo/0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb.png",
"highest_price": 109,
"total_supply": 10000,
"market_cap": 946096,
"holders": 3376,
"volume7dList": [
{
"volume": 3153.86,
"time": 1657320855301
},
{
"volume": 3051.48,
"time": 1657407256164
},
{
"volume": 1810.31,
"time": 1657493656186
},
{
"volume": 696.88,
"time": 1657580056205
},
{
"volume": 4243.94,
"time": 1657666456226
},
{
"volume": 1611.36,
"time": 1657752856322
},
{
"volume": 543.88,
"time": 1657839256342
}
],
"price7dList": [
{
"price": 80.8682,
"time": 1657320855301
},
{
"price": 92.4691,
"time": 1657407256164
},
{
"price": 86.2052,
"time": 1657493656186
},
{
"price": 87.11,
"time": 1657580056205
},
{
"price": 223.3653,
"time": 1657666456226
},
{
"price": 94.7859,
"time": 1657752856322
},
{
"price": 90.6467,
"time": 1657839256342
}
],
"opensea_floor_price": 73,
"authFlag": 0
},
{
"nft_platform": "BoredApeYachtClub",
"nft_address": "0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d",
"floor_price": 94,
"average_price": 122.2112,
"total_value": 977.69,
"count": 8,
"image": "https://logo.nftscan.com/logo/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d.png",
"highest_price": 180.69,
"total_supply": 10000,
"market_cap": 1265391,
"holders": 6446,
"volume7dList": [
{
"volume": 1875.2,
"time": 1657320857704
},
{
"volume": 2201.59,
"time": 1657407258063
},
{
"volume": 762,
"time": 1657493658327
},
{
"volume": 1124.8737,
"time": 1657580058344
},
{
"volume": 1384.8,
"time": 1657666458362
},
{
"volume": 996.3,
"time": 1657752858380
},
{
"volume": 381.69,
"time": 1657839258398
}
],
"price7dList": [
{
"price": 170.4727,
"time": 1657320857704
},
{
"price": 104.8376,
"time": 1657407258063
},
{
"price": 108.8571,
"time": 1657493658327
},
{
"price": 112.4874,
"time": 1657580058344
},
{
"price": 125.8909,
"time": 1657666458362
},
{
"price": 110.7,
"time": 1657752858380
},
{
"price": 127.23,
"time": 1657839258398
}
],
"opensea_floor_price": 99,
"authFlag": 0
},
{
"nft_platform": "Squares and Triangles by Maksim Hapeyenka",
"nft_address": "0xa7d8d9ef8d8ce8992df33d8b8cf4aebabd5bd270",
"floor_price": 0.155,
"average_price": 1.547,
"total_value": 840.0019,
"count": 543,
"image": "https://logo.nftscan.com/logo/0xa7d8d9ef8d8ce8992df33d8b8cf4aebabd5bd270.png",
"highest_price": 169.69,
"total_supply": 183131,
"market_cap": 221808.2672,
"holders": 34011,
"volume7dList": [
{
"volume": 735.4112,
"time": 1657320859833
},
{
"volume": 634.525,
"time": 1657407259892
},
{
"volume": 686.473,
"time": 1657493659926
},
{
"volume": 436.4589,
"time": 1657580060431
},
{
"volume": 1109.52,
"time": 1657666460757
},
{
"volume": 1982.9054,
"time": 1657752861278
},
{
"volume": 395.6019,
"time": 1657839261385
}
],
"price7dList": [
{
"price": 1.0752,
"time": 1657320859833
},
{
"price": 1.2491,
"time": 1657407259892
},
{
"price": 1.8065,
"time": 1657493659926
},
{
"price": 0.6563,
"time": 1657580060431
},
{
"price": 1.5627,
"time": 1657666460757
},
{
"price": 2.0677,
"time": 1657752861278
},
{
"price": 2.5038,
"time": 1657839261385
}
],
"opensea_floor_price": 0.155,
"authFlag": 0
},
{
"nft_platform": "Super Cool World V2",
"nft_address": "0x670d4dd2e6badfbbd372d0d37e06cd2852754a04",
"floor_price": 0.56,
"average_price": 0.6584,
"total_value": 556.9921,
"count": 846,
"image": "https://logo.nftscan.com/logo/0x670d4dd2e6badfbbd372d0d37e06cd2852754a04.png",
"highest_price": 0.95,
"total_supply": 5080,
"market_cap": 3062.732,
"holders": 3007,
"volume7dList": [
{
"volume": 0,
"time": 1657320887824
},
{
"volume": 0,
"time": 1657407288105
},
{
"volume": 0,
"time": 1657493688119
},
{
"volume": 0,
"time": 1657580088132
},
{
"volume": 155.7175,
"time": 1657666488329
},
{
"volume": 228.1399,
"time": 1657752888460
},
{
"volume": 469.3439,
"time": 1657839288486
}
],
"price7dList": [
{
"price": 0,
"time": 1657320887824
},
{
"price": 0,
"time": 1657407288105
},
{
"price": 0,
"time": 1657493688119
},
{
"price": 0,
"time": 1657580088132
},
{
"price": 1.0112,
"time": 1657666488329
},
{
"price": 0.9017,
"time": 1657752888460
},
{
"price": 0.636,
"time": 1657839288486
}
],
"opensea_floor_price": 0.619,
"authFlag": 0
},
{
"nft_platform": "Otherdeed",
"nft_address": "0x34d85c9cdeb23fa97cb08333b511ac86e1c4e258",
"floor_price": 2.661,
"average_price": 5.0461,
"total_value": 550.0226,
"count": 109,
"image": "https://logo.nftscan.com/logo/0x34d85c9cdeb23fa97cb08333b511ac86e1c4e258.png",
"highest_price": 30,
"total_supply": 100000,
"market_cap": 577990,
"holders": 35025,
"volume7dList": [
{
"volume": 710.0527,
"time": 1657320889633
},
{
"volume": 668.2843,
"time": 1657407289658
},
{
"volume": 552.8932,
"time": 1657493689716
},
{
"volume": 459.7968,
"time": 1657580089841
},
{
"volume": 693.1521,
"time": 1657666489863
},
{
"volume": 648.8504,
"time": 1657752889884
},
{
"volume": 133.768,
"time": 1657839289906
}
],
"price7dList": [
{
"price": 6.7624,
"time": 1657320889633
},
{
"price": 5.4777,
"time": 1657407289658
},
{
"price": 5.8199,
"time": 1657493689716
},
{
"price": 4.7402,
"time": 1657580089841
},
{
"price": 6.5392,
"time": 1657666489863
},
{
"price": 5.742,
"time": 1657752889884
},
{
"price": 4.3151,
"time": 1657839289906
}
],
"opensea_floor_price": 2.78,
"authFlag": 0
}
]
}
This is an example of what I want to return
CodePudding user response：
What I understand, you are not setting the state correctly.
According to the response from the api, It is setting the information in data key.
You set the setData(response.assets). However, it should be setData(response.data)
And the other thing, I noticed the key's you are trying to return is not present in array's of object.
CodePudding user response：
Check your state setting on getAPI method.
setData(response.assets); // It should be response.data
Change it to like below.
const getAPI = () => {
const options = { method: "GET", headers: { Accept: "application/json" } };
fetch(
`https://www.nftscan.com/nftscan/getTopTrendingData?range=1d&volumeSort=desc`,
options
)
.then((response) => response.json())
.then((response) => {
setData(response.data);
console.log(response);
})
.catch((err) => console.error(err));
};
and you need to render your variables like this.
<div>
<ul>
<li>{nft.id} , {nft.floor_price }, {nft.sales} </li>
</ul>
</div>;
Use the properties that you need based on your requirements. I just modified the code and sharing the working sandbox link here.
