title: Unable to parse JSON data returned via fetch method in React
body: <p>Before marking it duplicate would be great if you please read once. I really, searched on this. 
  I am writing a React app to generate meme. I can connect the REST API successfully and able to fetch data. The problem is, while trying to parse data, I am getting an error which summarize that I am trying to access an undefined object, which I am not. </p>
  
  <p>I tried same code statically (without React's rendering flavor) in another editor and it is working fine. </p>
  
  <p>Here is my code,</p>
  
  <pre><code>class App extends React.Component{
  
      state = {memes : []};
  
      componentDidMount(){
          fetch(
              `https://api.imgflip.com/get_memes`
  
          ).then(
              (response) =&gt; {
                  if(response.ok){
                      return response;
                  }else{
                      console.log('no response');
                  }
              }
          ).then(data =&gt; data.json()).then(data =&gt; {
              console.log(data); //This is getting printed fine
             // console.log(data.memes[1].name); //un-commenting this is throwing error that 'Cannot read property '1' of undefined'
              this.setState({memes:data.memes});
  
  
          });
   }
      render(){
          if(this.state.memes.length &gt; 0){
              //For this I am getting error
              //Uncaught TypeError: Cannot read property 'length' of undefined
              console.log('array length is : ' + this.state.memes.length);
          }else{
              //This is printed fine
              console.log('Here array length is : ' + this.state.memes.length);
  
          }
          return (
              &lt;div&gt;
                  &lt;MemeImage/&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default App;
  </code></pre>
  
  <p>The problem is, during the second time rendering (after data is fetched) React assuming data.memes doesn't exist which is absurd for me. As per my console log, it exists.
  EX: </p>
  
  <pre><code>data:
  memes: Array(100)
  0: {id: "112126428", name: "Distracted Boyfriend", url: "https://i.imgflip.com/1ur9b0.jpg", width: 1200, height: 800, …}
  1: {id: "87743020", name: "Two Buttons", url: "https://i.imgflip.com/1g8my4.jpg", width: 600, height: 908, …}
  2: {id: "102156234", name: "Mocking Spongebob", url: "https://i.imgflip.com/1otk96.jpg", width: 502, height: 353, …}
  3: {id: "129242436", name: "Change My Mind", url: "https://i.imgflip.com/24y43o.jpg", width: 482, height: 361, …}
  
  </code></pre>
  
  <p>I checked the demo data as below from the respective website. As per this, <code>data.memes[0].name</code> is perfectly valid. I tried it and it worked.</p>
  
  <pre><code>    {
      "success": true,
      "data": {
          "memes": [
              {
                  "id": "61579",
                  "name": "One Does Not Simply",
                  "url": "https://i.imgflip.com/1bij.jpg",
                  "width": 568,
                  "height": 335,
                  "box_count": 2
              }
      ]
      }
    }
  </code></pre>
  
  <p>But really, clueless what is happening during React rendering, that it is fetching the 'data' object but can't access properties inside. Any help regarding what I am failing to understand about React's rendering would be very much appreciated. </p>