How to save api response in usestate and pass it react player source

Admin 1
Viewed 60

API response :

Array(80)
0:
Camera_Number: "Camera_1"
Company_Name: "Fraction Analytics Limited"
Floor Number: "Ground_Floor"
Group_Name: "Group_1"
Video_Name: "http://localhost:4000/video/0"
[[Prototype]]: Object

1:
Camera_Number: "Camera_2"
Company_Name: "Fraction Analytics Limited"
Floor Number: "Ground_Floor"
Group_Name: "Group_1"
Video_Name: "http://localhost:4000/video/1"
[[Prototype]]: Object

Here Video_Name: "http://localhost:4000/video/1" these are react-hosted videos.

App.js

call API using fetch and print results on the console.

 const onGridReady = (params) => {
    console.log("grid is ready");
    fetch("http://localhost:8000/get_all")
      .then((resp) => resp.json())
      .then((resp) => {
        console.log(resp.results);
        params.api.applyTransaction({ add: resp.results });
      });
  };

Now how to save API response in usestate and pass Video_Name field to react video player

    <iframe
      width="420"
      height="315"
      title="videos"
      src={"http://localhost:4000/video/0"}
      />

Here I just pass only one video to the source but I expected to pass multiple videos to the source dynamically.

enter image description here

When I click every time it should play different video as per api response

If you have any queries you can refer here to code

Thank you

reactjs javascript
1 Answers

You can just pass videos as array and select one by index, this index can be changed dynamically by calling

setState ({index_of_playing_video: video index })

<iframe
      width="420"
      height="315"
      title="videos"
      src={this.state.videos[this.state.index_of_playing_video]}
      />
user_134901650
Related