React - Cant access rates from state (api call)

Question

import React, { Component } from 'react';
import axios from 'axios';

class SearchCurrency extends Component {
  constructor() {
    super();
    this.state = {
      data: {}
    }
  }

  componentDidMount() {
    axios
      .get('http://data.fixer.io/api/latest?access_key=b0ab4945712b358052a8fc54d02e7b3d&base=EUR&symbols=USD,CAD,CHF,GBP,AUD')
      .then(res => 
          this.setState({
            data: res.data
          })
        )
      .catch(err => console.log(err))

  //api call here

  }
  render() {

for some reason i cant access rates obj within state

 const test = this.state.data.rates

  i try to map through obj here
  // const obj = Object.keys(test).map(i => test[i])

    console.log(test);

    // const map = test.map(i => <li>{i}</li>)
    return (
      <div>
        {/* {map} */}
      </div>
    )
  }
}
export default SearchCurrency;

thank you

Answer 1

The render is called before this is available, and throws an error. Make sure to secure it with an if, like so:

if (!this.state || this.state.data) {
   return null;
}