How to pass multiple videos button onclick event in react

user_18469042 0
Viewed 114

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

use-state use-effect react-hooks reactjs javascript
2 Answers

No need to use the click handler of the button. You cannot get row data with that.

Add a colId to column definition for actions. Then handle the onCellClicked action of the grid. You can get the row data using params.node.data.

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>
 {/* <iframe width="420" height="315" title="videos" src={id} /> */}
 <div>{videoName}</div>
</DialogContent>

Codesand box Link

user_191609060

Update answer:
First, you have to install json-loader

npm install --save-dev json-loader

After that, You can use dynamically import.
(code demo using React Hooks, do the same with class component)

import Record from './db.json'
// Syntax like:
// {
//     "Company_Name": "Fraction Analytics Limited",
//     "Floor Number": "Ground_Floor",
//     "Group_Name": "Group_1",
//     "Camera_Number": "Camera_2",
//     "Video_Name": "./videos/video1.mp4"
//   }

const MyComponent = () => {
    const [video, setVideo] = useState(null);
    useEffect(() => {
        console.log(Record)
        import(Record.Video_Name).then(res =>
            setVideo(res)
        )
    }, [Record])


    if (!video)
        return <></>
    return (
        <DialogContent>
            <iframe width="420" height="315" title='video'
                src={video}>
            </iframe>
        </DialogContent>
    )
}
user_106495290
Related