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>
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 and react-hook-form. I want the user to insert data in the input which after submitting will go to the function where I want to make an object with it.
<form onSubmit={handleSubmit(update)}>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Edit</Modal.Title>
</Modal.Header>
<Modal.Body>
<label>Description</label>
<input name="message" type="text" ref={register} placeholder="description"/>
</Modal.Body>
<Modal.Footer>
<button variant="secondary" onClick={handleClose}>
Cancel
</button>
<button type="submit" variant="primary" onClick={update}>
Edit
</button>
</Modal.Footer>
</Modal>
</form>
//I will need the async function later to await an api call.
const update = (data) => {
(async () => {
console.log("data", data)
})()
}
Thanks for helping!
EDIT:
I found the solution, I had to put the form in the modal but outside the modal components.
<Modal show={show} onHide={handleClose}>
<form onSubmit={handleSubmit(update)}>
<Modal.Header closeButton>
<Modal.Title>Edit</Modal.Title>
</Modal.Header>
<Modal.Body>
<label>Description</label>
<input name="message" type="text" placeholder="description" />
</Modal.Body>
<Modal.Footer>
<button variant="secondary" onClick={handleClose}>
Cancel
</button>
<button type="submit" variant="primary" onClick={update}>
Edit
</button>
</Modal.Footer>
</form>
</Modal>
Since you are using the react-hook-forms, simply can get the result after form submission.
The result object looks like this in your case:
{message: "some message data"}
So, you need to get the "message" property of data parameter on update function.
Note: you pass message as the name property of your input element so the data.message will give you the corresponding data on input element which is controlled by react-hook-forms
const update = (data) => {
(async () => {
console.log("data", data.message)
})()
}
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>
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
I have created a List.jsx which has Start button in it
<div className="container-fluid">
<Card>
<Card.Img variant="top" src="" />
<Card.Body>
<Card.Title>Basic Level 1</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<button type="button" className="btn btn-primary" onClick={this.handleShow}>Start</button>
</Card.Body>
</Card>
<ModalList showModal = {this.state.show} closeCallback = {this.handleClose}/>
</div>
When Start button is pressed it loads ModalList component which will have Next button.
ModalList.jsx
<Modal show= {this.props.showModal}>
<Modal.Header>
<Modal.Title>Modal heading</Modal.Title>
<button type="button" className="close" onClick={this.closeWasClicked}>
<span aria-hidden="true">×</span>
</button>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.closeWasClicked}>
Close
</Button>
<Button variant="primary" >
Next
</Button>
</Modal.Footer>
</Modal>
When Next is pressed I want a new Modal to get displayed with a slide animation. I don't want a separate class to be created for each modal, as the modals are many (depending on the data from API).
I tried to search for 'how to render the same component with an animation when a button is clicked' but couldn't find anything useful.