Tengo una tabla y un botón editar/eliminar en esa tabla (cada fila) para editar/eliminar la fila correspondiente.

Quiero abrir una ventana emergente cuando se hace clic en la edición, pero quiero abrir la ventana emergente con algunos parámetros para mostrar como "valor anterior, valor nuevo", etc.

Aquí está mi código para la tabla y puse un componente EditUserPopup en la parte inferior.

 function MainPanel(props) { const [isEditPopupOpen, setEditPopup] = useState(true); const deleteCustomer = async (id) => { await service.deleteCustomerById(id); props.refreshTableParam(); } const editCustomer = async (id, name, surname) => { setEditPopup(true); //WHAT I NEED HERE ? props.refreshTableParam(); } return ( <> <ReactBootStrap.Table striped bordered hover> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> {props.param && props.param.map((item) => ( <tr key={item.id}> <td>{item.id}</td> <td>{item.firstName}</td> <td>{item.lastName}</td> <td><Button className='editButton' onClick={() => editCustomer(item.id, item.firstName, item.lastName)}><FontAwesomeIcon icon={faUserEdit} /></Button></td> <td><Button className='deleteButton' onClick={() => deleteCustomer(item.id)}><FontAwesomeIcon icon={faTrashRestore} /></Button></td> </tr> ))} </tbody> </ReactBootStrap.Table> { //HOW TO OPEN THAT COMPONENT WITH PARAMS isEditPopupOpen && <EditUserPopup someParamHere={null}/> } </> ); }

Estoy llamando a la función editCustomer () con el botón en la tabla y estoy pensando en hacer que EditPopup sea visible de alguna manera con algún parámetro, y en otro componente (ventana emergente en sí) haré algo de lógica.

Pero no puedo alcanzar los valores de id, nombre, apellido en la ventana emergente. ¿Cómo puedo enviar los valores de fila de la tabla correspondientes a la ventana emergente?

La pagina es esta: