REACT - fetch json data from url and display it - json

Question

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.
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:
{
"type": "video",
"url": "http://somewebsite.com/wantedvideo.mp4"
}
From what i've read, fetch() is one way to get the data, but unfortunately I couldn't seem to understand what can be missing in the code I tried:
Here's my newbie attempt:
import React, {Component} from 'react';
class App extends Component{
constructor()
{
super();
this.state={
data: [],
}
}
componentDidMount()
{
fetch('https://demo7443497.mockable.io/stream/video')
.then((response) => response.json())
.then((findresponse)=>{
console.log(findresponse.url)
this.setState({
data:findresponse.url,
})
})
}
render()
{
return(
<div>
{this.state.data.url}
</div>
)
}
}
export default App;
My render() always looked suspiciously too simple for me, so my apologies for any "mad" mistakes I may have made
PS: If instead of a video there was some other data format such as an image or plain text in the url of the url field, is there an disavantadge in using the same code to fech it?
Thank you

Answer 1

this.setState({
data: findresponse.url,
})
You are setting url value to data and
in render accessing the data.url. (url on data which does not exists).
If you just put {this.state.data},you will get url value.
Also, if you are getting Object from response then declare state as
this.state = {
data: {}, //instead []
}
EDIT :
e.g. to display video using video control as per comment.
<video width="400" controls>
<source src={this.state.data} type="video/mp4" />
Your browser does not support HTML5 video.
</video>
Working codesandbox

Answer 2

I'm going to provide a simple App component which look like this -
import React, {Component} from 'react';
import { Player } from 'video-react';
class App extends Component{
constructor() {
super();
this.state = {
data: []
}
}
componentDidMount() {
fetch('https://demo7443497.mockable.io/stream/video')
.then( resp => resp.json())
.then((data)=> {
this.setState({
data: data.url
})
})
}
render() {
return(
<Player
playsInline
src={ this.state.data }
/>
)
}
}
export default App;
Import css -
import "node_modules/video-react/dist/video-react.css"; // import css
#import "~video-react/styles/scss/video-react"; // or import scss
Add <link rel="stylesheet" href="/css/video-react.css" /> inside index.html
Try this it will work for all browsers.