Hello I have a data fetching of Object from Object
Data
{
"test1": {
"success": true,
"mmr": 1627,
"name": "Choo",
"next_claim": 1639454954
},
"test2": {
"success": true,
"mmr": 1246,
"name": "Dee",
"next_claim": 1639454934
},
"test3": {
"success": true,
"mmr": 1066,
"name": "Boo",
"next_claim": 1639454964
}
}
I can't seem to show them on the page
tried using
import React, { useState, useEffect } from "react"
import Axios from "axios"
const Axie = () => {
const [axieStats, setAxieStats] = useState({})
const fetchAxie = async () => {
const response = await Axios(
"https://game-api.axie.technology/api/v1/ronin:0d771f9d749fe72671526e0a52ecdfc11f73ca7b,ronin:b9603b5ae4d10fce072432d99de572c1eb66b43e"
)
setAxieStats(response.data)
}
console.log(axieStats)
useEffect(() => {
fetchAxie()
}, [])
return <div></div>
}
export default Axie
can't seem to work
I have edited the question to the whole code from where I fetch the API.
The useState hook as seen in your code is first initialized to an empty object, which is not the desired object you want to use in the first place. When you're trying to access test2.mmr on the empty object test it will not find that object and throw a null reference exception. Here are some things you can do to get to the state you need:
setTest function somewhere in your code.async-await mechanism in place to handle updating the state variables for the dependent components.