¿Cómo abrir o cerrar react-bootstrap modal programáticamente?

Un modal es una ventana emergente o un cuadro de diálogo que se coloca en la página actual para mostrar el mensaje que debe leerse. Usando la biblioteca de interfaz de usuario de react-bootstrap, programaremos el modal usando ganchos en un componente funcional.

Podemos usar los ganchos useState() para abrir/cerrar un modal de arranque de reacción. La función useState es un gancho incorporado que nos permite agregar estado a un componente funcional sin cambiar a un componente de clase.
Sintaxis:

const [state, setState] = useState(initialState);

El estado del primer valor representa el estado actual, mientras que el segundo valor se usa para actualizar el estado de una función. La función useState toma un argumento como valor predeterminado. Antes de continuar, hay un requisito previo.

Requisito previo:

• Instalado react-bootstrap:  

npm install react-bootstrap bootstrap

• Importar bootstrap.min.css:

import 'bootstrap/dist/css/bootstrap.min.css';

• Importar useState gancho incorporado:

import React, {useState} from "react";

• Importe componentes individuales como Button y Modal

import Button from 'react-bootstrap/Button';

Aplicación.js: 

import React, {useState} from "react";
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
  
function Example() {
  const [show, setShow] = useState(false);
  
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  
  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch static backdrop modal
      </Button>
  
      <Modal
        show={show}
        onHide={handleClose}
        backdrop="static"
        keyboard={false}
      >
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          I will not close if you click outside me.
          Don't even try to press
          escape key.
        </Modal.Body>
        <Modal.Footer>
          <Button variant="primary" onClick={handleClose}>
            Close
          </Button>
            
        </Modal.Footer>
      </Modal>
    </>
  );
}
  
export default Example;

índice.js:

import React from "react";
import ReactDOM from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import App from "./App";
  
const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

Producción: