title: Accessing JSON object within Object using React/Axios
body: <p>I’m working with an API that shows data for cryptocurrencies called CryptoCompare. I’m a React noob but I’ve managed to use Axios to do the AJAX request. However I’m having trouble accessing the JSON elements I want.</p>
  
  <p>Here’s what the JSON looks like: <a href="https://min-api.cryptocompare.com/data/all/coinlist" rel="nofollow noreferrer">https://min-api.cryptocompare.com/data/all/coinlist</a></p>
  
  <p>Here is my request:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import axios from "axios";
  var NumberFormat = require('react-number-format');
  
  class App extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        coinList: []
      };
    }
  
  
  
    componentDidMount() {
      axios.get(`https://min-api.cryptocompare.com/data/all/coinlist`)
      .then(res =&gt; {
        const coins = res.data;
        //console.log(coins);
        this.setState({ coinList: coins});
      });
    }
  
  
  
  // Object.keys is used to map through the data. Can't map through the data without this because the data is not an array. Map can only be used on arrays.
    render() {
      console.log(this.state.coinList.Data);
      return (
        &lt;div className="App"&gt;
          {Object.keys(this.state.coinList).map((key) =&gt; (
            &lt;div className="container"&gt;
              &lt;span className="left"&gt;{key}&lt;/span&gt;
              &lt;span className="right"&gt;&lt;NumberFormat value={this.state.coinList[key].CoinName} displayType={'text'} decimalPrecision={2} thousandSeparator={true} prefix={'$'} /&gt;&lt;/span&gt;
            &lt;/div&gt;
          ))}
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>I am able to output some JSON using console.log(this.state.coinList.Data);. It outputs the JSON object, but I am unable to console.log properties of the object itself.</p>
  
  <p>How would I, for example, output the CoinName property of the first element 42?</p>
  
  <p>console.log(this.state.coinList.Data.CoinName) doesn’t work</p>
  
  <p>nor does console.log(this.state.coinList.Data[0].CoinName) etc…</p>