Estoy trabajando en una aplicación jhipster. cuando creo mi propio modal y configuro el estado en verdadero, mi modal personalizado se muestra en el renderizado inicial de mi aplicación, pero cuando lo configuro en falso e intento llamar al modal a través de mi función, no aparece.

Luego, cuando llamo a handleShow(), la alerta que dice "hola" aparece en el navegador, pero no llama a setShow().

También intenté usar el modal incorporado de jhipster, pero parece que tengo que pasar una URL específica que contiene una identificación antes de que aparezca

importaciones

 import { Modal } from 'react-bootstrap';

estado

 const [showModal, setShow] = useState(false);

Función modal

 const handleClose = () => setShow(false); const handleShow = () => { alert('hello'); setShow(true); };

Eliminar función

 const handleDelete = row => { dispatch(deleteEntity(row)); };

La columna de acción de arranque y el contenido modal

 { dataField: 'databasePKey', text: 'Actions', headerStyle: { backgroundColor: 'red', color: 'white' }, formatter: (cellContent, row) => { return ( <> <div className="btn-group flex-btn-group-container"> <Button onClick={() => handleShow()} color="danger" size="sm" data-cy="entityDeleteButton"> <FontAwesomeIcon icon="trash" /> <span className="d-none d- md-inline"></span> </Button> {showModal === true ? <Modal /> : null} </div> <Modal show={showModal} onHide={handleClose}> <Modal.Header closeButton> <Modal.Title>Confirm delete operation</Modal.Title> </Modal.Header> <Modal.Body>Are you sure you want to delete this Terminal? </Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={handleClose}> Cancel </Button> <Button variant="primary" onClick={() => handleDelete(row.id)}> Confirm </Button> </Modal.Footer> </Modal> </> ); }, },