I'm trying to display a modal when cliking on a button using react-bootstrap, copy pasted the code from https://react-bootstrap.github.io/components/modal/, but when I open the modal it displays an unexpected white background. Here is a screenshot of the issue and here is another screenshot of the expected behavior.
Here is my code :
function PartnershipCardList({partnerships}) {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return(
<>
<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>
</>
)
}
export default PartnershipCardList
If you could help me in any way that would be really kind, have a good day
Related
I am trying to let modal screen to disappear when I click close or save & close button. But I cannot find which line prevent close feature to work.
What could be wrong? I really want to let modal to disappear when I click button inside of it.
note: I use latest react-bootstrap (bootstrap 5)
function MemberMgt() {
const [showModal, setShowModal] = useState(false);
const handleCloseClick = () => {
setShowModal(false);
};
const handleEditClick = () => {
setShowModal(true);
};
...
<tr onClick={handleEditClick}>
<Modal show={showModal} onHide={handleCloseClick}>
<Modal.Header closeButton>
<Modal.Title>Edit Screen</Modal.Title>
</Modal.Header>
<Modal.Body>
<li>ID</li>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleCloseClick}>
Close
</Button>
<Button variant="primary" onClick={handleCloseClick}>
Save & Close
</Button>
</Modal.Footer>
</Modal>
...
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:
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}/>
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
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;
For example, i have this functon that returns to me some ids and i get delete this posts with the id's returned with: onClick={() => { Delete(idvalue[i]) }}
However I need to open a modal before deleting the item asking if the person is sure they want to delete, and when they click on the yes I have no idea how to pass the right value to delete and where will stay this onClick to open the modal.
function Idchecker() {
for (let i = 0; i < idvalue.length; i++) {
if (idvalue[i] == item.id) {
return (
<div className="img-array">
<button className="click-img" onClick={() => { Delete(idvalue[i]) }}>
<img src={trash} alt="botão excluir" className="imgsbtns" />
</button>
<button className="click-img">
<img src={edit} alt="botão editar" className="imgsbtns" />
</button>
</div>
)
}
}
}
the modal:
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
style={{ fontFamily: "Questrial" }}
>
<Modal.Header>
<Modal.Title id="contained-modal-title-vcenter">
DELETE THE POST
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
are you sure?
</p>
<Button onClick={Delete}>YES</Button>
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>CLOSE</Button>
</Modal.Footer>
</Modal>
);
}
Add two state:
openDeleteModal to manage opening modal (argument for example, you have this argument yet)
deleteId to store id.
const [openDeleteModal, setOpenDeleteModal] = useState(false);
const [deleteId, setDeleteId] = useState(null);
When you click on post you must open modal and update deleteId, so rewrite onClick function:
onClick={()=>{
setDeleteId(idvalue[i]);
setOpenDeleteModal(true)}
}
Pass deleteId and setOpenModal via props to Modal component and rewrite modal buttons function:
<Modal.Body>
<p>
are you sure?
</p>
<Button
onClick={()=>{
Delete(deleteId)
setOpenDeleteModal(false) //close modal after delete
}}>
YES
</Button>
</Modal.Body>
<Modal.Footer>
<Button onClick={()=>setOpenDeleteModal(false)}>CLOSE</Button>
</Modal.Footer>
This is a continuation from my previous post Rendering Modal Popup
After editing my code, I was able to launch my modal pop-up but had issues having it styled the same way as in the tutorial.
This is the desired styling that I pulled from a React-Boostrap tutorial
https://react-bootstrap.github.io/components/modal/
After running the same code as in the tutorial, this was my output. It's styled in plain HTML.
This is my import statement which I've used to import dependencies from the tutorial
import { Button, Modal } from 'react-bootstrap';
Updated code which successfully launched my modal pop-up
const Example = ({ show, onClose, onSave }) => (
<Modal show={show} onHide={onClose}>
<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={onClose}>
Close
</Button>
<Button variant="primary" onClick={onSave}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
)
const addToCart = () => {
Axios.post(process.env.REACT_APP_BACKEND_API + "/cart/",)
.then((res) => {
setShowExample(true);
})
.catch((err) => {
if (err.response && err.response.status === 401) {
setIsLoggedIn(false);
}
});
};
<div className="field is-grouped">
<div className="control">
<button className="button is-primary" onClick={addToCart}>
ADD TO CART
</button>
<Example //added
show={showExample}
onClose={() => setShowExample(false)}
onSave={() => setShowExample(false)}
/>
</div>
Hello i have a modal with two buttons
<Modal show={props.show} onHide={props.handleModalOpen}>
<Modal.Header closeButton>
<Modal.Title>Fill this form to continue</Modal.Title>
</Modal.Header>
<Modal.Body>This is the modal </Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={props.handleModalOpen}>
Close
</Button>
<Button variant="primary" onClick={()=>(myhadler,props.handleModalOpen)}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
On onClick i want to trigger a function that called
myhandler
and close the modal if the button is pressed with
props.handleModalOpen.
The props.handleModalOpen is communicating with other component that is the parent. My problem is that when i pressed the button my function myhandler in not working and the only that i achive is to close the modal. Is there a way to run simultaneously my function and the props.handleModalOpen without problem
The function
myhandler
is used to save the form data in local storage
You can just call myHandler() in callback's scope and add a state if the button opened with handleModalOpen
const [isOpened, setIsOpened] = useState(false);
<Modal.Footer>
<Button
variant="secondary"
onClick={() => {
props.handleModalOpen();
setIsOpened(true);
}}
>
Close
</Button>
<Button
variant="primary"
onClick={() => {
myHandler();
if (isOpened) {
props.handleModalOpen();
setIsOpened(false);
}
}}
>
Save Changes
</Button>
</Modal.Footer>