ReactJs App’s mapped list of buttons from Json file only have the last value of json array

I am making list of button that will lead to different YouTube videos on ReactJs page. The issue is that when I map the links from json file (which contains video links), all the buttons get the last link of the mapped array. I need a way that all the rendered buttons will get their respective links. My code is below, I am using react ModalVideo to show my YouTube video.

    <ul className="list-unstyled">
         {datalist.lectures.map((value, index) => { 
                return  (
          <li>
          <ModalVideo channel='youtube' autoplay isOpen={isOpen} videoId={value} onClose={() => setOpen(false)} />
          
          <button className="play-icon" onClick={()=> setOpen(true)}> <i className="las la-play"></i> Lecture: {index+1}</button>
          </li>
                         )})}
          </ul>


Read more here: https://stackoverflow.com/questions/67932995/reactjs-apps-mapped-list-of-buttons-from-json-file-only-have-the-last-value-of

Content Attribution

This content was originally published by Harvir at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: