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
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)