I want to pass my data listed with map to modal. My data it looks like this on the screen:

1 John watch

2 Karrie watch

3 Karen watch ... like this

in the form of a table. All of the watch are buttons and when the button is clicked, the modal opens.

How can i show my data in modal when i click on buttons?

      <Modal show={showModal} onClose={() => setShowModal(false)} title="{}"> //modal component
        <iframe
          src=""
          height="315"
          width="560"
          frameborder="0"
          allowfullscreen=""
        />
      </Modal>
      <div className={styles.card}>
        <div className={styles.content}>
          <table>
            <thead>
              <tr>
                <td>#</td>
                <td>Topic</td>
                <td>View</td>
              </tr>
            </thead>
            <tbody>
              {VIDEOS_DATA.data.map((item) => (
                <tr key={item.id}>
                  <td>{item.id}</td>
                  <td>{item.topic}</td>
                  <td>
                    <a onClick={()=>setShowModal(true)}>
                      <FiPlay size="1.5rem" color="#009688" />
                      &nbsp;Watch
                    </a>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>

CodePudding user response：

Suggest to have a setIdShown setter. Which you can pass to your onClick function to set the Id of the item you want to show.

In the modal, you can have a iDShown getter. You can then filter items by ID and show the data in the modal.