Click here to Skip to main content
15,880,392 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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(response.videoName); //  How to update videoName here
            setOpen(true);
            };

            const [videoName, setVideoName] = useState([]);
            const [response, setResponse] = useState([]);

            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 


What I have tried:

I am trying to store API response in use state variable and pass it to button onclick action
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900