I am trying to display on a single page react app, the icons from items, but as a response from the fetch, instead of getting an array of objects, I'm getting only one object, which doesnt have the data from my db.json.
My question is: How can I reach the "displayIcon" if I can't get a correct response?
Here is my function, and below the db.json:
const [weapons, setWeapons] = useState(null);
useEffect(() => {
console.log('effect triggered');
fetch('http://localhost:3001/data/', {
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})
.then((res) => res.json())
.then((data) => setWeapons(data));
}, []);
console.log('render', weapons)"data": [
{
"uuid": "1",
"displayName": "Odin",
"category": "EEquippableCategory::Heavy",
"defaultSkinUuid": "f454efd1-49cb-372f-7096-d394df615308",
"displayIcon": "https://media.valorant-api.com/weapons/63e6c2b6-4a8e-869c-3d4c-e38355226584/displayicon.png",
"killStreamIcon": "https://media.valorant-api.com/weapons/63e6c2b6-4a8e-869c-3d4c-e38355226584/killstreamicon.png",
"assetPath": "ShooterGame/Content/Equippables/Guns/HvyMachineGuns/HMG/HMGPrimaryAsset",
},
{
"uuid": "2",
"displayName": "Ares",
"category": "EEquippableCategory::Heavy",
"defaultSkinUuid": "5305d9c4-4f46-fbf4-9e9a-dea772c263b5",
"displayIcon": "https://media.valorant-api.com/weapons/55d8a0f4-4274-ca67-fe2c-06ab45efdf58/displayicon.png",
"killStreamIcon": "https://media.valorant-api.com/weapons/55d8a0f4-4274-ca67-fe2c-06ab45efdf58/killstreamicon.png",
"assetPath": "ShooterGame/Content/Equippables/Guns/HvyMachineGuns/LMG/LMGPrimaryAsset",
}If you are trying to render a single image, you can get the item by uuid and render the image (or anything else).
Here's an example component That accesses the weapon with uuid of 2. In your app you'd probably want to pass uuid to this component using props, but the same logic will apply.strong text
// get weapon by uuid
const ShowIcon = () => {
let weapons = {
"data": [
{
"uuid": "1",
"displayName": "Odin",
"category": "EEquippableCategory::Heavy",
"defaultSkinUuid": "f454efd1-49cb-372f-7096-d394df615308",
"displayIcon": "https://media.valorant-api.com/weapons/63e6c2b6-4a8e-869c-3d4c-e38355226584/displayicon.png",
"killStreamIcon": "https://media.valorant-api.com/weapons/63e6c2b6-4a8e-869c-3d4c-e38355226584/killstreamicon.png",
"assetPath": "ShooterGame/Content/Equippables/Guns/HvyMachineGuns/HMG/HMGPrimaryAsset",
},
{
"uuid": "2",
"displayName": "Ares",
"category": "EEquippableCategory::Heavy",
"defaultSkinUuid": "5305d9c4-4f46-fbf4-9e9a-dea772c263b5",
"displayIcon": "https://media.valorant-api.com/weapons/55d8a0f4-4274-ca67-fe2c-06ab45efdf58/displayicon.png",
"killStreamIcon": "https://media.valorant-api.com/weapons/55d8a0f4-4274-ca67-fe2c-06ab45efdf58/killstreamicon.png",
"assetPath": "ShooterGame/Content/Equippables/Guns/HvyMachineGuns/LMG/LMGPrimaryAsset",
}
]
}
let weapon = weapons.data.filter(i => i.uuid == 2 ? 1 : 0);
return(
<div>
<img src={weapon[0].displayIcon} />
</div>
);
}
ReactDOM.render(<ShowIcon />, document.getElementById('icon'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="icon"></div>