how to show bootstrap Modal in another component react js

Question

I am using react bootstrap Modal now I have Modal I want to show that modal in different components for the provided edit functionality. how I can archive this

UpdateUserModal.js

import React,{useState} from 'react'
import {Modal} from 'react-bootstrap'

const UpdateUserModal = () => {

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

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

  return (
    <div>
        <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  )
}

export default UpdateUserModal

I want to add my <button type="submit" className="btn btn-warning mx-1">{<FaUserEdit/>} Edite</button> on different component button

Update:

Answer 1

Update your UpdateUserModal.js with this.

import {Modal} from 'react-bootstrap'

const UpdateUserModal = (props) => {
const {show, handleClose, handleShow} = props


  return (
    <div>
        <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  )
}

export default UpdateUserModal

Now, wherever you wish to use this modal, create this state and function there:

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

const handleClose = () => setShow(false);
const handleShow = () => setShow(true);

Now on your edit button where you want this, update you state from button click,

onClick={()=> handleShow()}

and then import and call:

import UpdateUserModal from "./UpdateUserModal";
<UpdateUserModal show={show} handleClose={handleClose} handleShow={handleShow}/>

Answer 2

It's the same like with all components in React:

• Import it: import UpdateUserModal from "./UpdateUserModal";
• Call it: <UpdateUserModal />

Look into following sandbox for a quick example: https://codesandbox.io/s/divine-water-7sofms

Answer 3

Open Modal from different component in react.js with typescript - reactbootstrap

This is My modal

import React, { useState } from "react";
import _classes from "./MyModal.module.scss";
import { Button, Modal } from "react-bootstrap";
import Link from "next/link";

type Props = {
  show: boolean | undefined;
  handleClose?: () => void;
  handleShow?: () => void;
};

const Modal = (props: Props) => {
  const { show, handleClose, handleShow } = props;

  const [showModal, setShowModal] = useState(show);

  return (
    <div className={`${_classes["generate-api-key-modal-cover"]}`}>
      <Modal
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
        show={show}
        onHide={handleClose}
        footer={null}
      >
        <Modal.Body className="text-center px-8 lg:px-44">
          <h4 className="text-2xl">MODAL Opened</h4>
          <p className="text-base py-3.5">
            A verification email has been sent your registered email address.
            Please check your mail.
          </p>
          <Button
            variant="primary"
            type="submit"
            className="bg-primary text-sm py-3 mb-32"
          >
            <Link href="/dashboard">
              <span className="cursor-pointer ml-1 text-sm">
                Proceed to dashboard
              </span>
            </Link>
          </Button>
        </Modal.Body>
      </Modal>
    </div>
  );
};

export default MyModal;

and this is where i am calling it

import React, { useState } from "react";
import { Button } from "react-bootstrap";
import MyModal; from "../../../../common/components/MyModal";

const CallModalInthisComponent = () => {
  const [showModal, setShowModal] = useState(false);

  const handleClose = () => setShowModal(false);
  const handleShow = () => setShowModal(!showModal);

  return (
    <>
      <div className="container-fluid flex justify-center items-center h-100">
        <div className=" bg-white  max-w-[600px] flex flex-col px-24 py-24">
          <h4 className="text-[26px] fond-medium leading-[31px] py-2 px-6 text-center">
            My modal Opening Screen
          </h4>
          <p className="text-xs leading-[16px] py-2 px-5 text-center text-gray-1">
            Sed at orci efficitur, tincidunt turpis vitae, luctus purus. Morbi
            eleifend sagittis sem ut tempor.
          </p>
          <Button
            variant="primary"
            className="text-sm py-3 my-2"
            onClick={() => handleShow()}
            // disabled={buttonDisable}
          >
            Open Modal from Here
          </Button>
        </div>
      </div>
      <MyModal
        show={showModal}
        handleClose={handleClose}
        handleShow={handleShow}
      />
    </>
  );
};

export default CallModalInthisComponent;