javascript - 在弹出reactjs中打印表格行

Question

我想将整个打印row到popup. 意味着一旦用户单击特定行，该特定行必须在popup. 任何想法如何做到这一点。我可以创建静态弹出窗口，但我不知道如何table row在popup和显示中传递整个内容。

这是popup.js

import React from "react";
import './style.css'
 const Popup = props => {
  return (  
    <div className="popup-box">
      <div className="box">
        <span className="close-icon" onClick={props.handleClose}>x</span>
        {props.content}
      </div>
    </div>
  );
};
 
export default Popup;

这是App.js

import React, { useState } from 'react';
import Popup from './popup';
 
function App() {
  const [isOpen, setIsOpen] = useState(false);
 
  const togglePopup = () => {
    setIsOpen(!isOpen);
  }
 
  return <div>
    <input
      type="button"
      value="Click to Open Popup"
      onClick={togglePopup}
    />
    <p>I am a Popup</p>
    {isOpen && <Popup
      content={<>
        <p>Created by Niharika</p>
        <button>Test button</button>
      </>}
      handleClose={togglePopup}
    />}
  </div>
}
 
export default App;

这是style.css

/* Popup style */
.popup-box {
    position: fixed;
    background: #00000050;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
  }
  
  .box {
    position: relative;
    width: 70%;
    margin: 0 auto;
    height: auto;
    max-height: 70vh;
    margin-top: calc(100vh - 85vh - 20px);
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    border: 1px solid #999;
    overflow: auto;
  }
  
  .close-icon {
    content: 'x';
    cursor: pointer;
    position: fixed;
    right: calc(15% - 30px);
    top: calc(100vh - 85vh - 33px);
    background: #ededed;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    line-height: 20px;
    text-align: center;
    border: 1px solid #999;
    font-size: 20px;

}

我需要将我的代码合并到下表的列中。怎么做。

                                   <tbody>
                                {response.map((certificate: Certificate,index:number) => {
                                    return (
                                     <tr key={certificate.certificateNo}>
                                      <td>{certificate.certificateNo}</td>
                                      <td>{certificate.sponser}</td>
                                      <td>{certificate.protoColNo}</td>
                                      <td>{certificate.startDate}</td>
                                      <td>{certificate.endDate}</td>
                                      <td>{certificate.noOfSubjects}</td>
                                      <td>{certificate.country}</td>
                                      <td>{certificate.requestStatus}</td>
                                      <td>
                                         <div className="btn-group mr-2">
<!--In this button I need to incorporate that code -->                                            
                                            <button className="btn btn-sm btn-outline-secondary" onClick={() =>popUp()} >
                                                <i className="bi bi-search"></i>
                                            </button>

                                                </div>
                                            </td>
                                        </tr>
                                    );
                                })}
                                <td></td>
                            </tbody>