I just wan't store and pass current props.url to the videomodal. so I can show the same active video on the video modal. I can't use usestate in the map. how can I pass it? or is there a any other solution?
Videos.tsx ( props.url must be in the <VideoModal videoURL={here} /> )
<div className="video__container">
<div className="video__item">
{VIDEO_LIST.map((props: any) => (
<div key={props.id}>
{props.id === currentItem && (
<>
<ReactPlayer
url={props.url}
playing={true}
loop={true}
volume={0}
muted={true}
height="100%"
width="100%"
controls={true}
config={{
file: {
attributes: {
disablepictureinpicture: "true",
controlsList:
"disablepictureinpicture nodownload noplaybackrate",
},
},
}}
/>
</>
)}
</div>
))}
</div>
</div>
<div className="play__video">
{isModalOpen && (
<VideoModal
handleCloseModal={closeModal}
videoURL={HERE I NEED TO PASS THE URL}
/>
)}
</div>
VideoModal.tsx
<div className="body">
<div className="player-wrapper">
<ReactPlayer
className="react-player fixed-bottom"
url={videoURL}
width="100%"
height="100%"
playing={true}
controls={true}
/>
</div>
</div>
I think you could rewrite that in this way:
const currentVideo = useMemo(() => VIDEO_LIST.find(v => v.id === currentId ),[currentItem, VIDEO_LIST])
return ( <div className="video__container">
<div className="video__item">
{currentVideo && (
<ReactPlayer
url={currentVideo.url}
playing={true}
loop={true}
volume={0}
muted={true}
height="100%"
width="100%"
controls={true}
config={{
file: {
attributes: {
disablepictureinpicture: "true",
controlsList:
"disablepictureinpicture nodownload noplaybackrate",
},
},
}}
/>
)}
</div>
</div>
<div className="play__video">
{ isModalOpen &&
currentVideo && (
<VideoModal
handleCloseModal={closeModal}
videoURL={currentVideo.url}
/>
)}
</div>)
}
Since you need to render just one video element at time, I think you don't need a map, it's clearer to select the video element before the return statement, so you can pass the data to any other Component that needs them.