How can i play modal video(React video player on pop up) onClick event of a particular video in React.js

Question

I have multiple videos emended in my Component. All i need to do is, once i click on/play a particular video, a pop up should appear playing that video with all the controls in reactjs.

Answer 1

You should be using react portals and you can select the video to be played by using state.

React portals

React useState

if you have the videos themselves stored or even if you have just the URLs for the videos. While showing the multiple videos you must have used an array/object you can replicate the selection. This should ideally be the structure of your app. The root component(one where the modal pops up) should have the state and the callback(on select function) which should be passed on to the component that renders multiple videos. Each of these videos must call the on select function on click(or whichever event handler you want to use) then turn a boolean true in the root component and render the video based on it

EDIT: I believe I didn't help with picking a particular video. For the same when you are rendering them as a list(I'll refer to that component as VideoList and to each Video as VideoItem) You'll be having a root component(referred to as App) and you can have the following structure:

App
    CallbackFuncToSelectVideoAndUpdateState(selectedVideo){

    }
    VideoModal//(initially set it as null or don't render anything using a boolean)
    VideoList
        VideoItem onClick=(item)=>CallbackFuncToSelectVideoAndUpdateState(item) id=videoItemId

VideoItem.js

handleClick(props.id){
    props.onClick(props.id)
}
return <div onClick=handleClick><otherComponentStructure/></div>