Play button onclick video player in react js

Question

call API using fetch and get response in console and assign values to table header. after that creating one button in react js. Each button have one video URL which is got from API response

API response:

Camera_Number:"Camera_1"
Group_Name: "Group_1"
Video_Name: "http://localhost:4000/video/0"

Camera_Number:"Camera_2"
Group_Name: "Group_2"
Video_Name: "http://localhost:4000/video/1"

I stored this response in useState and pass this usestate response to video player source

  const actionButton = (params) => {
    setVideoName(params.videoName); // I am assuming but need to update videoName here
    setOpen(true);
  };
      headerName: "Actions",
          field: "Video_Name",
          cellRendererFramework: (params) => (
            <div>
              <Button
                variant="contained"
                onClick={() => actionButton(params)}
              >
                Play
              </Button>
            </div>

Above code shows assign video_name to Actions header then I created one button. when I click one button, all of the videos open in one window and play all videos. But I want it so that only that certain video that was clicked would show.

 <DialogContent>
            {response.map(({ Video_Name }) => (
              <iframe
                width="420"
                height="315"
                title="videos"
                src={Video_Name}
              />
            ))}
          </DialogContent>

How to resolve this issue using react-hooks.

for more details and code reference

https://github.com/iamharry-dev/modal_popup

how to create index for video and pass videos to video player source. when i click that button certain video that was clicked would show.

Thanks

Answer 1

The response state object contains the complete API response. <DialogContent> maps over this & create multiple iframe elements. We don't need to map & create multiple iframes -

<DialogContent>
  {response.map(({ Video_Name }) => (
...

Instead create dialog content based on name of the video where row was clicked.

const [videoName, setVideoName] = useState("");

function onCellClicked(params) {
    // maps to colId: "action" in columnDefs,
    if (params.column.colId === "action") {
      // set videoName for the row
      setVideoName(params.node.data.Video_Name);
      setOpen(true);
    }
}

// grid config
<AgGridReact
  ...
  rowData={response}
  onCellClicked={onCellClicked}>
</AgGridReact>

// access videoName in dialog content
<DialogContent>
 <div>{videoName}</div>
</DialogContent>

Output - Click on any row's play button. Result is that rows video url. You can now use this to play the actual video.