Estoy trabajando en una tabla de arranque de reacción, la configuré de una manera cuando hago clic en el botón del icono, aparece un modal que muestra la información de los datos de la fila. Pero cuando hago clic en otra columna de una fila, el modal también aparece mostrando datos.

Quiero una situación en la que el modal solo aparezca cuando haga clic en el ícono, en lugar de la fila. Esto hace que no se llame a la función cellEdit.

 const [modalInfo, setModalInfo] = useState([]) const [show, setShow] = useState(false); const [showModal, setShowModal] = useState(null); const rowEvents = {onClick: (e, row) => { setModalInfo(row); toggleTrueFalse(); }, }; const toggleTrueFalse = () => setShowModal(handleShow);

Editar celda

 const cellEdit = cellEditFactory({ mode: 'click', blurToSave: true,})

Modal

 const ModalContent = () => { return ( <> <Modal isOpen show={show}> <ModalHeader>Terminal Info</ModalHeader> <ModalBody> <ul> <h6 style={{ fontFamily: 'Georgia' }}>id : {modalInfo.id}</h6> </ul> </ModalBody> <ModalFooter> <Button color="secondary" onClick={handleClose}> <FontAwesomeIcon icon="ban" /> &nbsp; Close </Button> </ModalFooter> </Modal> </> ); };

jsx

 return ( <> <div> <h2 style={{ color: "red", fontFamily: "Georgia" }}>Terminals</h2> </div> <BootstrapTable keyField="id" data={data} columns={columns} cellEdit={cellEdit} rowEvents={rowEvents} /> {show ? <ModalContent /> : null} </> );

Si puedo lograr esto, entonces cellEdit funcionará bien.