title: How to manipulate fetch response for single object JSON in react-native
body: <p>I am creating my first mobile app using react-native. I am using axios to fetch data from a wordpress website.  </p>
  
  <p>I managed to successfully get data from an array JSON with a list of musical tracks. I then inserted data into a <code>state</code> variable. Then, I used <code>.map</code> function to show contents on screen. Here's a working sample code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text } from 'react-native';
  import axios from 'axios';
  
  export default class FreshTracks extends Component {
      state={tracks:[]}
      componentDidMount(){
          axios.get("https://&lt;URL for JSON list of tracks&gt;")
              .then(response =&gt; this.setState({tracks:response.data}))
              .catch(function(error) {
                  console.log('Fetch error: ' + error.message);
                  });
      }  
      renderTracks(){
          return this.state.tracks.map (track =&gt;
              &lt;View key={track.id}&gt;
                  &lt;Text&gt;{track.title.rendered}&lt;/Text&gt;
                  &lt;Text&gt;{track.content.rendered}&lt;/Text&gt;
              &lt;/View&gt;
          )  
      }
      render() {
          return (
              &lt;View&gt;    
                  {this.renderTracks()}
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p>Now, I am struggling to get data from a single object JSON, one musical track.  </p>
  
  <p>At first, I tried keeping the same code, only changing the url. I get <code>Fetch error: this.state.tracks.map is not a function</code>. I tried <code>console.log(this.state.tracks)</code> before the <code>return</code> in <code>renderTracks()</code> and the data is returned in the console as an object, exactly how it should.</p>
  
  <p>I then tried to change the <code>state</code> initialization to: <code>state={tracks:*{}*}</code> instead of <code>state={tracks:*[]*}</code>. Also, i changed the <code>renderTracks()</code> function to: </p>
  
  <pre><code>renderTracks(){
          return (
              &lt;View&gt;
                  &lt;Text&gt;{this.state.tracks.id}&lt;/Text&gt;
                  &lt;Text&gt;{this.state.tracks.slug}&lt;/Text&gt;
                  &lt;Text&gt;{this.state.tracks.title.rendered}&lt;/Text&gt;
                  &lt;Text&gt;{this.state.tracks.content.rendered}&lt;/Text&gt;
              &lt;/View&gt;
          )
      }
  </code></pre>
  
  <p>This way is partially working  Accessing data on a single level like <code>this.state.tracks.id</code> or <code>this.state.tracks.slug</code> is working as expected. Accessing multi-level data like <code>this.state.tracks.title.rendered</code> throws an error:</p>
  
  <pre><code>Cannot read property 'rendered' of undefined
  </code></pre>
  
  <p>What should I do to correctly get data from single object JSON?</p>