Simplemente no quiero almacenar y pasar props.url actual al videomodal. para que pueda mostrar el mismo video activo en el modal de video. No puedo usar usestate en el mapa. como puedo pasarlo o hay alguna otra solucion?
Videos.tsx ( props.url debe estar en <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>Creo que podrías reescribirlo de esta manera:
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>) }Dado que solo necesita renderizar un elemento de video a la vez, creo que no necesita un mapa, es más claro seleccionar el elemento de video antes de la declaración de devolución, para que pueda pasar los datos a cualquier otro Componente que los necesite.