Reputation:
i'm trying my hardest to wrap my head around this concept and after wasting a couple hours i figured id try and see if someone would kindly fix and elaborate upon such a simple matter
constructor(props) {
super(props);
this.state = {
marketdata: [],
loading: true
}
}
componentDidMount() {
axios.get('https://api.coingecko.com/api/v3/global')
.then(res => res.data)
.then((data) => {
this.setState({ marketdata: data })
console.log(this.state.marketdata.data.market_cap_change_percentage_24h_usd)
})
}
...
render() {
const { coindata, marketdata} = this.state;
<p>{marketdata.data.market_cap_change_percentage_24h_usd}</p>
TypeError: Cannot read property 'market_cap_change_percentage_24h_usd' of undefined
i want to be able to better understand so i can carry on and not get stuck when trying to consume data from APIs throughout this entire project.
Upvotes: 0
Views: 59
Reputation: 2515
Not entirely sure what this.setState()
does, but I assume it should set the member state
.
The problem is that you try to access a member of an object while that object does not exist. So, you should change
this.state.marketdata.data.market_cap_change_percentage_24h_usd
to
this.state.marketdata.market_cap_change_percentage_24h_usd
{ marketdata: data }
does not mean that the new property is marketdata.data
but the colon (:
) is an assignment just like =
, so marketdata
gets the value of data
.
If that does not work try to console.log from "up to bottom" which means first log this.state
, then this.state.marketdata
and so on, until you see what you received and set.
Upvotes: 1