Develop Reference

event.stopPropagation() not working on bootstrap modal

When clicking on modal window body, it runs outer div's onClick handler. event.stoppropagation() working fine for button inside outer div and buttons inside modal but don't know how to unbind outer div click handler on modal body.
sample code (Modal is not working on csb, please run on your code editor)
import React, { useState } from "react";
import { Button, Modal } from "react-bootstrap";
export default function App() {
const [show, setShow] = useState(false);
const handleShow = (event) => {
event.stopPropagation();
setShow(true);
};
const handleClose = (event) => {
event.stopPropagation();
setShow(false);
};
const deleteModal = () => {
return (
<Modal
id="deleteModal"
className="modal"
show={show}
onHide={handleClose}
centered
size="sm"
backdrop="static"
keyboard={false}
>
<Modal.Body>
<div>
<span>Delete Tweet ?</span>
</div>
<div>This can’t be undone</div>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Cancel
</Button>
<Button variant="primary">Delete</Button>
</Modal.Footer>
</Modal>
);
};
const postHandler = () => {
alert("clicked on div");
};
return (
<div onClick={postHandler} style={{ border: "1px solid" }}>
{deleteModal()}
<h1>Hello CodeSandbox</h1>
<Button variant="info" onClick={handleShow}>
Delete
</Button>
</div>
);
}
P.S- I'm using react-bootstrap for creating modal.

return (
<>
{show && deleteModal()} // just move this logic outside the div
<div onClick={postHandler} style={{ border: '1px solid' }}>
<h1>Hello CodeSandbox</h1>
<Button variant="info" onClick={handleShow}>
Delete
</Button>
</div>
</>
);
Hey, if you just move the deleteModal outside the div then it would solve your problem.

How to pass a value to a modal

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>

React-Bootstrap Modal Is only styling in plain HTML

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>

React-bootstrap modal displays an unexpected white background

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

Can have simultaneously at onClick function props and a function at reactjs?

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>