How can I pass map data with props

Issue

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>

Solution

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.

Answered By - Cesare Polonara