Cannot get any rate's value - json

Question

I am trying to load the data from exchangeratesapi but some how I cannot load the exchangerates's data!!
componentDidMount() {
this.setState({loading: true})
fetch("https://api.exchangeratesapi.io/latest")
.then(response => response.json())
.then(data => {
console.log(data)
this.setState({
loading: false,
currency: data,
})
})
}
render() {
var text = this.state.loading ? "loading..." : this.state.currency.BGN
return (
<div>
<p>{this.state.currency.RON}</p>
</div>
)
}
I have try on of the dumbest way to load the data.
omponentDidMount() {
this.setState({loading: true})
fetch("https://api.exchangeratesapi.io/latest")
.then(response => response.json())
.then(data => {
console.log(data)
this.setState({
loading: false,
currency: data,
bulgaria:data.rates.BGN,
})
})
}
And inside of render
var text = this.state.loading ? "loading..." : this.state.currency.bulgaria
But I believe there got a to be a better way to do this.

Answer 1

You are trying to access the property directly from currency however, it exists in rates.
This is incorrect:
{this.state.currency.RON}
It should be:
{this.state.currency.rates.RON}
Similarly, the variable text you created is not used anywhere. IMHO it should be like this:
render() {
const {loading, currency} = this.state;
console.log(currency); //only for debugging
return (
{ loading? 'Loading...' : (
<div>
<p>{currency.rates.RON}</p>
</div>)
}
)
}