Bootstrap modal in React.js

Question

I need to open a Bootstrap Modal from clicking on a button in a Bootstrap navbar and other places (to show data for a component instance, ie. providing \"editing\" f

Answer 1

You can use the model from the react-bootstrap from link and it's basically a function based

function Example() {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return (
    <>
      
        Launch demo modal
      

      
        
          Modal heading
        
        Woohoo, you're reading this text in a modal!
        
          
            Close
          
          
            Save Changes
          
        
      
    
  );
}

and You can convert it into the class component

import React, { Component } from "react";
import { Button, Modal } from "react-bootstrap";


export default class exampleextends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      close: false,
    };
  } 
  render() {
    return (
      

         this.setState({ show: true })}
        >
          Choose Profile
        
        
          
            
              
Delete
            
          
          
            body   
          

              

                 this.setState({ show: false })}>Cancel
              
              

                Delete
              
            
        
      
    );
  }
}