React.js - 將隨地圖列出的數據傳遞給模態

Question

我想將隨地圖列出的數據傳遞給模態。 我的數據在屏幕上看起來像這樣：

1 約翰手表

2 嘉莉手表

3 凱倫手表……像這樣

以表格的形式。 所有的手表都是按鈕，當點擊按鈕時，模式打開。

當我點擊按鈕時，如何以模式顯示我的數據？

      <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>

Answer 1

建議有一個 setIdShown 設置器。 您可以將其傳遞給 onClick 函數以設置要顯示的項目的 Id。

在模態中，您可以有一個 iDShown getter。 然后，您可以按 ID 過濾項目並在模式中顯示數據。