I cant use bootstrap modals in a map function

Question

first iframe works. but second iframe is in the bootstrap modal doesnt get my src attribute. shows empty in the console.

if i type src="youtube.com/url" instead of src={musics.musicEmbed} this also works. but i want to use bootstrap modals in my map function how can i do that?

{musicList.map((musics) => {
       return (
         <div className="games">
           <div className="inside-games">
             <div className="game1">
               <h2 id="game-title">{musics.musicTitle}</h2>
               <Iframe
                 url={musics.musicEmbed}
                 width="450px"
                 height="450px"
                 id="myId"
                 className="myClassname"
                 display="initial"
                 position="relative"
               />
               <img src={musics.musicImage} id="game" />
               <Button variant="warning" onClick={handleShow}>
                 Start Game
               </Button>
               <Modal
                 size="lg"
                 id="mods"
                 show={show}
                 onHide={() => setShow(false)}
                 aria-labelledby="example-modal-sizes-title-lg"
               >
                 <Modal.Body>
                   <Iframe
                     url={musics.musicEmbed}
                     width="450px"
                     height="450px"
                     id="myId"
                     className="myClassname"
                     display="initial"
                     position="relative"
                   />
                 </Modal.Body>
                 <Modal.Footer>
                   <Button variant="warning" onClick={handleClose}>
                     Close
                   </Button>
                 </Modal.Footer>
               </Modal>
             </div>
           </div>
         </div>
       );
     })}

score 0 · Answer 1 · answered Feb 21 '22 at 00:14

i solved with creating another modal component and pass it to main map component. ^^

 {musicList.map((musics) => {
        return (
          <div className="games">
            <div className="inside-games">
              <div className="game1">
                <h2 id="game-title">{musics.musicTitle}</h2>
                <img src={musics.musicImage} id="game" />
                <MusicModal
                  musicImage={musics.musicImage}
                  musicTitle={musics.musicTitle}
                  musicEmbed={musics.musicEmbed}
                />
              </div>
            </div>
          </div>
        );
      })}

I cant use bootstrap modals in a map function

1 Answers1