title: Displaying JSON data using Fetch API and map() in Javascript/Reactjs
body: <p>I have been trying to grab json data from an API and display it using the map() function. Unfortunately the API returns data in the format: { "type": ..., "value": ... }. The second object <em>value</em> contains an array with the data I want to access.</p>
  
  <p>Is there a way I can access (or single out) JUST the second object in the API? and then I can run map() on it. See code below. This currently returns the error: <strong>this.state.jokes.map is not a function</strong></p>
  
  <p>P.S. the code works pefectly on APIs wrapped in an array e.g. <a href="http://jsonplaceholder.typicode.com/posts" rel="nofollow noreferrer">http://jsonplaceholder.typicode.com/posts</a></p>
  
  <pre><code>class JokeList extends React.Component {
  
      constructor() {
          super();
          this.state = {jokes:[]};
  
      }
  
      componentDidMount() {
          fetch(`http://api.icndb.com/jokes`)
              .then(result =&gt; result.json())
              .then(jokes =&gt; this.setState({jokes}))
      }
  
      render () {
  
          return (
              &lt;div&gt; 
                  {this.state.jokes.map(joke =&gt; 
                         &lt;div key={joke.id}&gt; {joke.joke} &lt;/div&gt;)}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>