title: REACT - fetch json data from url and display it
body: <p>I am new to REACT and I was trying to learn how to get and display a specific parameter from a json style message stored in an url.</p>
  
  <p>For instance, the video I was trying to show, is stored in and url, which is a field of the json message itself, so it would look like this:</p>
  
  <pre><code>{
  
      "type": "video", 
  
      "url": "http://somewebsite.com/wantedvideo.mp4" 
  }
  </code></pre>
  
  <p>From what i've read, <code>fetch()</code> is one way to get the data, but unfortunately I couldn't seem to understand what can be missing in the code I tried:</p>
  
  <p>Here's my newbie attempt:</p>
  
  <pre><code>import React, {Component} from 'react';
  
  class App extends Component{
    constructor()
    {
      super();
      this.state={
        data: [],
      }
    }
  
    componentDidMount()
    {
      fetch('https://demo7443497.mockable.io/stream/video')
      .then((response) =&gt; response.json())
      .then((findresponse)=&gt;{
        console.log(findresponse.url)
        this.setState({
          data:findresponse.url,
        })
      })
    }
  
    render()
    {
      return(
          &lt;div&gt;
            {this.state.data.url} 
          &lt;/div&gt; 
      )
    }
  
  }
  
  export default App;
  </code></pre>
  
  <p>My <code>render()</code> always looked suspiciously too simple for me, so my apologies for any "mad" mistakes I may have made</p>
  
  <p>PS: If instead of a video there was some other data format such as an image or plain text in the url of the <code>url</code> field, is there an disavantadge in using the same code to fech it? </p>
  
  <p>Thank you</p>