React-player: unable to play just selected item from mapped array

Question

I´m using react-player in nextjs-app to show videos fetched via youtube-api. Everything works fine, modal gets open after clicking on the playBtn but then the player plays all videos, not just the selected one. I really don´t know why because I set the videoId into the url of RectPlayer dynamically. Would somebody tell me please what I did wrong? Here is the source:

export default function Playlist({ videos }) {

  const [open, setOpen] = useState(false);

  const onOpenModal = () => setOpen(true);
  const onCloseModal = () => setOpen(false);

  const videoURL = "https://www.youtube.com/watch?v=";

  const sortedVids = videos
    .sort((a, b) =>
      Number(
        new Date(b.contentDetails.videoPublishedAt) -
          Number(new Date(a.contentDetails.videoPublishedAt))
      )
    )

return (
...

 {sortedVids.map((vid, id) => {
                return (
                    <div className={styles.item_container} key={id}>
                      <div className={styles.clip_container}>
                        <Image
                          className={styles.thumbnails}
                          src={vid.snippet.thumbnails.medium.url}
                          layout="fill"
                          objectFit="cover"
                          alt={vid.snippet.title}
                        />
                        <button
                          className={styles.playBtn}
                          onClick={onOpenModal}
                        >
                          <Image
                            src="/images/play.svg"
                            width="60"
                            height="60"
                          />
                        </button>
                        <div>
                          <Modal
                            open={open}
                            onClose={onCloseModal}
                            center
                            classNames={{
                              overlay: "customOverlay",
                              modal: "customModal",
                              overlayAnimationIn: "customEnterOverlayAnimation",
                              overlayAnimationOut:
                                "customLeaveOverlayAnimation",
                              modalAnimationIn: "customEnterModalAnimation",
                              modalAnimationOut: "customLeaveModalAnimation",
                            }}
                            animationDuration={800}
                          >
                            <ReactPlayer
                              playing={true}
                              url={
                                videoURL + `${vid.snippet.resourceId.videoId}`,
                              }
                              width="100%"
                              height="calc(100vh - 100px)"
                            />
                          </Modal>
                        </div>
                      </div>
                      <div className={styles.details_container}>
                        <h3>{vid.snippet.title}</h3>
                      </div>
                    </div>
                );
              })}
           );
          }

Update: I tried it by using a second state like this:

const [modalIsOpen, setModalIsOpen] = useState(false);
const [modalData, setModalData] = useState(null);

{sortedVids
            .filter((v) => v.snippet.title !== 'Private video')
            .map((vid, id) => {
              return (
                <div className={styles.item_container} key={id}>
                  <div className={styles.clip_container}>
                    <Image
                      className={styles.thumbnails}
                      src={vid.snippet.thumbnails.medium.url}
                      layout='fill'
                      objectFit='cover'
                      alt={vid.snippet.title}
                    />
                    <button
                      className={styles.playBtn}
                      onClick={() => {
                        setModalData(vid.snippet.resourceId.videoId);
                        console.log(modalData);
                        setModalIsOpen(true);
                      }}
                    >
                      <Image src='/images/play.svg' width='60' height='60' />
                    </button>
                    <div>
                      <Modal
                        key={modalData}
                        open={modalIsOpen}
                        onClose={() => setModalIsOpen(false)}
                        center
                        classNames={{
                          overlay: 'customOverlay',
                          modal: 'customModal',
                          overlayAnimationIn: 'customEnterOverlayAnimation',
                          overlayAnimationOut: 'customLeaveOverlayAnimation',
                          modalAnimationIn: 'customEnterModalAnimation',
                          modalAnimationOut: 'customLeaveModalAnimation',
                        }}
                        animationDuration={800}
                      >
                        <ReactPlayer
                          playing={true}
                          url={videoURL + `${modalData}`}
                          width='100%'
                          height='calc(100vh - 100px)'
                        />
                      </Modal>
                    </div>
                  </div>
                  <div className={styles.details_container}>
                    <h3>{vid.snippet.title}</h3>
                  </div>
                </div>
              );
            })}

but the result is the same...

@DaniR Yes, you`re right! Do you probably know how to set up modal to open just once? — Ydonut13, Aug 29 '21 at 14:34

score 1 · Accepted Answer · answered Sep 02 '21 at 17:38

Replaced the modal outside the map function and it´s holding container and passed modalDate onClick. This code worked for me:

const [modalIsOpen, setModalIsOpen] = useState(false);
  const [modalData, setModalData] = useState(null);

  const videoURL = "https://www.youtube.com/watch?v=" + modalData;

 return (
    <>
     ...
          {sortedVids
            .map((vid, id) => {
              return (
                <div className={styles.item_container} key={id}>
                  <div className={styles.clip_container}>
                    <button
                      className={styles.playBtn}
                      onClick={() => {
                        setModalData(vid.snippet.resourceId.videoId);
                        console.log(modalData);
                        setModalIsOpen(true);
                      }}
                    >
                      <Image src="/images/play.svg" width="60" height="60" />
                    </button>
                  </div>
                </div>
              );
            })}
        </div>
        <div>
          <Modal
            open={modalIsOpen}
            onClose={() => setModalIsOpen(false)}
            center > 
            <ReactPlayer
              playing={true}
              url={videoURL}
              config={{
                youtube: {
                  playerVars: {
                    autoplay: 1,
                    controls: 1,
                  },
                },
              }}
            />
          </Modal>
        </div>
      </div>
    </>
  );

score 0 · Answer 2 · answered Aug 29 '21 at 14:51

Your onOpenModal opens all modals. The best approach is extreact the vid logic to its own component and call them like:

export default function Playlist({ videos }) {

  const videoURL = "https://www.youtube.com/watch?v=";

  const sortedVids = videos
    .sort((a, b) =>
      Number(
        new Date(b.contentDetails.videoPublishedAt) -
          Number(new Date(a.contentDetails.videoPublishedAt))
      )
    )

return (
...

 {sortedVids.map((vid, id) => {
                return (<MagicVidComponent vid={vid}/>)
   }
  })
}

const MagicVidComponent = (vid) => {
  const [open, setOpen] = useState(false);

  const onOpenModal = () => setOpen(true);
  const onCloseModal = () => setOpen(false);

return (
  <div className={styles.clip_container}>
                        <Image
                          className={styles.thumbnails}
                          src={vid.snippet.thumbnails.medium.url}
                          layout="fill"
                          objectFit="cover"
                          alt={vid.snippet.title}
                        />
                        <button
                          className={styles.playBtn}
                          onClick={setIdToOpen(id)}
                        >
                          <Image
                            src="/images/play.svg"
                            width="60"
                            height="60"
                          />
                        </button>
                        <div>
                          <Modal
                            open={idToOpen === id}
                            onClose={onCloseModal}
                            center
                            classNames={{
                              overlay: "customOverlay",
                              modal: "customModal",
                              overlayAnimationIn: "customEnterOverlayAnimation",
                              overlayAnimationOut:
                                "customLeaveOverlayAnimation",
                              modalAnimationIn: "customEnterModalAnimation",
                              modalAnimationOut: "customLeaveModalAnimation",
                            }}
                            animationDuration={800}
                          >
                            <ReactPlayer
                              playing={true}
                              url={
                                videoURL + `${vid.snippet.resourceId.videoId}`,
                              }
                              width="100%"
                              height="calc(100vh - 100px)"
                            />
                          </Modal>
                        </div>
                      </div>
                      <div className={styles.details_container}>
                        <h3>{vid.snippet.title}</h3>
                      </div>
)
}

But quick and dirty you can do something like:

export default function Playlist({ videos }) {

  const [idToOpen, setIdToOpen] = useState();


  const onCloseModal = () => setIdToOpen(undefined);

  const videoURL = "https://www.youtube.com/watch?v=";

  const sortedVids = videos
    .sort((a, b) =>
      Number(
        new Date(b.contentDetails.videoPublishedAt) -
          Number(new Date(a.contentDetails.videoPublishedAt))
      )
    )

return (
...

 {sortedVids.map((vid, id) => {
                return (
                    <div className={styles.item_container} key={id}>
                      <div className={styles.clip_container}>
                        <Image
                          className={styles.thumbnails}
                          src={vid.snippet.thumbnails.medium.url}
                          layout="fill"
                          objectFit="cover"
                          alt={vid.snippet.title}
                        />
                        <button
                          className={styles.playBtn}
                          onClick={setIdToOpen(id)}
                        >
                          <Image
                            src="/images/play.svg"
                            width="60"
                            height="60"
                          />
                        </button>
                        <div>
                          <Modal
                            open={idToOpen === id}
                            onClose={onCloseModal}
                            center
                            classNames={{
                              overlay: "customOverlay",
                              modal: "customModal",
                              overlayAnimationIn: "customEnterOverlayAnimation",
                              overlayAnimationOut:
                                "customLeaveOverlayAnimation",
                              modalAnimationIn: "customEnterModalAnimation",
                              modalAnimationOut: "customLeaveModalAnimation",
                            }}
                            animationDuration={800}
                          >
                            <ReactPlayer
                              playing={true}
                              url={
                                videoURL + `${vid.snippet.resourceId.videoId}`,
                              }
                              width="100%"
                              height="calc(100vh - 100px)"
                            />
                          </Modal>
                        </div>
                      </div>
                      <div className={styles.details_container}>
                        <h3>{vid.snippet.title}</h3>
                      </div>
                    </div>
                );
              })}
           );
          }

Thank you for your answer! If I follow this way I get the error "Error: Too many re-renders. React limits the number of renders to prevent an infinite loop." — Ydonut13, Aug 29 '21 at 15:46

React-player: unable to play just selected item from mapped array

2 Answers2